Controlling Typography With CSS Grid

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, simply use display:grid on the parent element. Then apply grid-template-columns to define the regions and grid-gap to specify the gutter. For simplicity, let’s create a two-column layout using the following markups:

	
<body>
 <main></main>
 <aside></aside>
</body>
	

Here’s the basic CSS:

	
body {
 display: grid;
 grid-template-columns: 2fr 1fr;
 grid-gap: 1em;
}
 	

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 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 it 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. To see the above example in action, take a look at my online résumé.

Making responsive grid for the web is as easy as defining the fr unit in the grid-template-columns element. To illustrate the flexibility of using fr unit, check out my personal blog. When readers read my blog posts on thier desktop computer, I want the headline to be on the left, the main text in the middle, and the date on the right. This is all the CSS I need to accomplish it:

	
article {grid-template-columns: 1fr 2fr 1fr;}
 	

In the footer of my blog, which shares the same grid, I want each unit to span into four equal columns:

	
aside {grid-template-columns: 1fr 1fr 1fr 1fr;}
 	

Dive Deeper

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.