Grids are systematic layouts made of columns and rows. They play a crucial role in organizing information and maintaining consistency throughout a composition. One of the major benefits of grid-based design is typographic control. Even though grids have been used in print design for many decades, they only become available on the web in recent years with the support of CSS Grid, which landed in major browsers in early 2017. Let’s take a look at some key elements of CSS Grid.
Defining a Grid
To create a grid in CSS, use display:grid on the parent element. Then apply grid-template-columns to define the regions and grid-gap to specify the gutters. Let’s create a two-column layout for an online résumé.
In the CSS above, body is the parent element. main and aside are the direct children; therefore, they become grid regions. Defined in grid-template-columns, main takes up 2fr units and aside takes up 1fr unit. The gutter (grid-gap) is 1em.
The fr Unit
CSS Grid introduces the new fr unit, which represents fraction, to provide flexible grid layouts. Unlike a print layout, which defines rigid columns, the web needs its fluidity; therefore, fr unit allows columns to adapt to the available space of the parent element. The fr unit is designed specifically with the principles of responsive design; therefore, making responsive grid for the web is as easy as defining the fr unit in the grid-template-columns element. Let’t take a look at my blog.
When readers read my blog posts on their desktop computer, I want the headline to be on the left, the main text in the middle, and the date on the right. Here’s markups:
This chapter only scratches the surface of CSS Grid. If you want to dive deeper, I highly recommend starting with Jon Suh’s Learn CSS Grid. Rachel Andrew, one of the early advocates for CSS Grid, has written a comprehensive guide on the subject for the Mozilla Developer Network.
If you would like to learn the principles of grid-based design, I strongly recommend Khoi Vinh’s Ordering Disorder. Even though the process, which intended for fixed layout, is outdated, the grid theory is still applicable.