Layoutit Grid: Learning CSS Grid Visually With a Generator

Layoutit Grid is an interactive open source CSS Grid generator. It allows you to draw the design and view the code in the process. You can interact with the code, add or remove track lines and drag them to change the size - you will see changes in CSS and HTML in real time!

Once the layout is complete, you can create a CodePen or get the code to start your next project. This tool puts code first and helps you learn it while using CSS Grid directly.

CSS Grid: A new way of thinking

We can now create a powerful responsive layout for our web experience. We can finally learn to design with a coherent layout tool instead of rote memorizing a bunch of tricks to force element positioning.

Of course, this is not to say that such a generator can prevent us from having to understand the code we write. We should all learn how CSS Grid and Flexbox work. Even if your strong point is JavaScript, having a solid CSS knowledge base is a strong ally when expressing your ideas. When sharing component prototypes, UX interactions and even algorithms in online sandboxes, the way work is presented has a big impact. Developing the right layouts—and defining the styles to create them—is fundamental.

Making layouts in CSS should not be a daunting task. CSS Grid is actually very fun! For example, using a named grid area feels like drawing an ASCII art version of the design on paper. Let's create the layout of the photo application, which mainly displays the photos and people in the photo side by side, as well as the typical header, footer, and configuration sidebar.

 <code>.photos-app { /* 为我们的应用程序布局，让我们将内容放在网格中*/ display: grid; /* 我们想要3 列和3 行，这些是使用`fr`（剩余空间的一部分）的响应式轨道大小*/ grid-template-columns: 20% 1fr 1fr; grid-template-rows: 0.5fr 1.7fr 0.3fr; /* 让我们稍微分开一下轨道*/ gap: 1em; /* 我们现在有3x3 个单元格，这就是每个部分放置的位置*/ grid-template-areas:  "header header header"  /* 顶部行中延伸的页眉*/  "config photos people"  /* 左侧边栏和我们的应用程序内容*/  "footer footer footer"; /* 底部行的页脚 */ } .the-header { /* 在每个部分中，让我们定义我们用来引用区域的名称*/ grid-area: "header"; }</code>

This is just a small part of what you can build with CSS Grid. The specifications are very flexible. Areas can also be placed directly with line numbers or names, or they can be placed implicitly by the browser, and the content will be automatically distributed within the grid. And specifications are still evolving, adding features such as sub-grids.

At the same time, using grids can be difficult, like anything that requires a new way of thinking. It takes a lot of time to understand such things. And one way to help do this is…

Learn while playing

When learning CSS Grid, it is easy to be intimidated by its symbols and semantics. Before you develop some muscle memory, starting the learning process with visual and interactive tools can be an excellent way to overcome early fears. Many of us have used generators when learning how to create shadows, gradients, Markdown tables, and more. If carefully constructed, generators are a great learning aid.

Let's use Layoutit Grid to recreate the same design in our example.

Opening generators like Layoutit Grid is not intended to be permanently dependent; they are stepping stones. This specific generator materializes your design with a few clicks and comes with corresponding code to help you experience the power of CSS Grid. This provides you with the early success you need to drive the learning process. For some of us, generators remain in our toolbox permanently. Not because we don't know how to make the layout by hand, but because having a visual feedback loop can help us quickly convert ideas into code. So we keep using them.

Sarah Drasner also created a CSS Grid generator worthy of attention.

Learning by building

Leniolabs recently opened the Layoutit Grid and added new features such as interactive code view, area editing, history and offline support. And there are more features under development.

Check it out on GitHub If you have ideas for improving tools, please contact us! Open a question and let's discuss it on GitHub. Entering the metafield, you can also learn about the CSS Grid specification by helping us build tools.

We use this application to track best practices for creating high-performance interactive web experiences. It is now powered by the newly released Vue 3, built using components, and using Vite, a new development tool that does not bundle applications during development, which allows us to get instant feedback during development. If you are curious and want to build with us, fork the repository and let's learn together!

The above is the detailed content of Layoutit Grid: Learning CSS Grid Visually With a Generator. For more information, please follow other related articles on the PHP Chinese website!