Five online CSS Grid generator evaluation: Efficiently build responsive web layout

Core points:

• CSS Grid is a powerful tool for creating web layouts. There are multiple online CSS Grid generators that provide visual interfaces to design layouts, such as Sarah Drasner's CSS Grid Generator, Leniolabs' LayoutIt, Drew Minns' Griddy, Masaya Kazama Vue Grid Generator and Dmitrii Bykov's CSS Grid Layout Generator.
• While these generators can simplify the process of creating layouts, not all generators fully support the full functionality of CSS Grid. In the author's test, only Dmitrii Bykov's CSS Grid generator was able to perfectly reproduce complex, manually written layouts.
• CSS Grid generators are especially useful for users who prefer visual encoding or are new to CSS Grid, but they may appear more restrictive for those who know CSS Grid better.
• Despite its limitations, the CSS Grid generator is still a handy tool for quickly creating basic layouts. However, it is very helpful to understand the basics of CSS Grid when using these tools, especially when designing more complex layouts.

CSS Grid has become one of the most exciting advancements in CSS. It is a CSS tool designed for building any web layout you can think of, from the simplest to the most complex. Today, CSS Grid is widely supported by all mainstream browsers—gone of the dark ages of using float to build layouts.

It can be fun to write a CSS Grid layout directly in the code editor. While the specification documentation is complex, the key concept learning curve required to build a simple layout is not steep. There are a lot of resources to get you started quickly, with Tiffany Brown’s CSS Master, Rachel Andrew’s Grid by Example, and Jen Simmons’ Layout Land ranked first.

For those who are more accustomed to writing layouts with a visual editor, there are some interesting online options to try.

The following are five online CSS tools with excellent visual interfaces that I will test. The idea is: design a CSS Grid-based layout with just a few clicks, get the code and run it! Let's test this idea and see what happens.

Test page layout

In this article, I will provide this simple, manually written CSS Grid layout.

CodePen demo link

This layout has multiple HTML container tags as Grid containers in nested structures. I could have used the new subgrid feature recently added to Grid, but at the time of writing, only Firefox 69 supports it, and none of the online generators discussed here implements this feature.

For most CSS Grid generators, I focus my tests on the <code><ul></ul> element that acts as the Grid container for individual cards. The code looks like this:

.kitties > ul {
  /* grid styles */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

Note that the value of the grid-template-columns attribute only allows you to add responsiveness without media queries:

• Use the repeat() function and auto-fit attribute of the CSS Grid. You can add as many columns as you like, they will perfectly fit the width of the grid, no matter what that width is.
• Use the minmax() function to make sure each column is at least 320px wide, so it can also be displayed well on smaller screens.

Most CSS Grid generators do not include the function to set grid-template-columns using the above CSS Grid features, so you need to use the Media Query Adjustment Tool to add responsiveness to your layout.

When I try to use the CSS Grid generator tool, I will replace the above code with the code generated by each tool and check its functionality based on the results displayed on the screen. Except for the fourth CSS Grid generator in the list (Masaya Kazama's Vue-based tool). This is because it can build the entire layout very directly and quickly, including the header and footer, with a few clicks and a few adjustments to one of the preset layouts.

Okay, let's get started!

(The following is a detailed evaluation of the five CSS Grid generators, including pictures and CodePen links, which are consistent with the original text, but the language and expression have been adjusted)

(A detailed evaluation of five CSS Grid generators should be inserted here, including pictures and CodePen links)

Conclusion

If you are looking for a way to quickly create a basic CSS Grid layout using visualization tools, the CSS Grid generator will be very handy. Remember, these tools don't usually offer all the amazing CSS Grid features. Of the five tools I listed, only Dmitrii Bykov's CSS Grid generator is able to implement most of the features detailed in the specification and perfectly reproduce the version I originally wrote manually.

Lastly, it will be helpful to understand the basics of CSS Grid when using the online generator. But the more you know about CSS Grid, the more clumsy these visual editors will be for you, especially when you try a bolder layout design.

(Frequently asked questions about CSS Grid generator should be inserted here, which is consistent with the original text, but the language and expression are adjusted)

The above is the detailed content of 5 Super CSS Grid Generators for Your Layouts. For more information, please follow other related articles on the PHP Chinese website!