3
Building Advanced Grid Layouts
The last two chapters were about learning the basics of CSS Grid and getting used to them. We’ve practiced adding grid layouts to pages and automatically arranging items. Since we’ve gained experience, we will now look into more advanced features of CSS Grid, one of which is not even available in all browsers yet, as of 2022.
In this chapter, we will look at advanced grid areas, the placement of grid items within grid cells, and subgrids, and how they differ from nested grids. And we’ll further develop parts of Awesome Analytics, our overarching project.
We’ll look at the following topics:
- What are the row axis and column axis?
- Arranging grid items and grid cells with the align and justify properties
- Defining and using advanced grid templates
- Creating subgrids
- Emulating subgrids with nested grids
- Masonry layouts
- Practicing with Awesome Analytics
Technical requirements
For this chapter, we’ll need roughly the same tools as we used in Chapter 2, Project Introduction: What We’ll Work on and First Tasks:
- A browser, preferably Chromium-based, such as Google Chrome, Brave, or Vivaldi, but Firefox or Apple Safari works, too.
- A browser that currently supports subgrids. We can check which browsers support subgrids on Caniuse: https://caniuse.com/?search=subgrid.
- An integrated development environment (IDE) or text editor, such as WebStorm, VS Code, or VIM, with HTML and CSS syntax highlighting.
- Internet access is necessary to access the code.
- Git (optional, we can also download the folder from GitHub).
- Node.js with at least version 14, and npm with at least version 6.
If Node.js is not currently installed on your system, or you’ve got the wrong version, nvm (the Node Version Manager) is a fantastic tool to handle different Node.js versions on one system.
All the code for this chapter can be found on GitHub in this repository: https://github.com/PacktPublishing/Mastering-CSS-Grid/tree/main/chapter3.
Understanding the row axis and column axis and how to influence them
When discussing a grid, we often also discuss where something is positioned on which axis. What many people know from other applications, or even from mathematics, are the standard X and Y axis, with X being the horizontal axis (that is, the larger X, the more on the right it is) and Y being the vertical axis.
However, things become more complicated when we take different scripts into account. Most language scripts nowadays use a left-to-right system, or LTR for short. But some scripts, such as the Arabic script, the Hebrew alphabet, or Thaana, use a right-to-left system, or RTL for short.
For some applications, a top-to-bottom approach might also be desirable for text, images, and other content. When we speak of an axis, we usually use the row axis (or inline axis) and column axis (or block axis).
In standard writing mode, the row axis is horizontal from left to right and corresponds with the X axis, whereas the column axis is equivalent to the Y axis.
Some CSS Grid properties also use start and end as possible values. Depending on the writing mode, the start of a grid item, grid container, or grid cell is usually at the top and left, whereas the end is on the opposite side of these elements.
We can adjust the text direction and, therefore, the grid direction with the direction CSS property, which takes the following values:
- ltr is the default value and stands for left to right
- rtl stands for right to left
We can also use the dir="rtl" HTML attribute on the HTML tag of our application to change the text direction.
In addition to changing the text direction on the horizontal axis, we can also adjust its placement on the vertical axis. For that, CSS Grid offers the writing-mode CSS property, which takes one of the following values:
- horizontal-tb is the default value and aligns the elements and the text horizontally.
- vertical-rl means from top to bottom, then right to left, and basically rotates the entire grid by 90 degrees clockwise.
- vertical-lr means from top to bottom, then left to right, and rotates the grid by 90 degrees clockwise.
- sideways-rl means from bottom to top, then right to left. The value is experimental as of 2023.
- sideways-lr means from bottom to top, then left to right. The value is experimental as of 2023.
All of these values influence the direction and orientation of the row axis and column axis. The vertical-* and sideways-* values switch them; when applied, the row axis becomes equivalent to the Y axis, and the column axis becomes equivalent to the X axis.
A note on the readability of the chapter
From this point on, we’ll use mainly the row and column axes and rarely talk about the X and Y axes anymore. For the sake of simplicity, we’ll assume a horizontal left-to-right writing mode.
With this knowledge, we can influence the direction and alignments of grids to our will and define the rules of how grid items behave within it. Next, we’ll learn how to align and justify elements within those grids.
Arranging grid items and grid cells with alignment and justification rules
By default, all grid items are arranged within the grid cells in a stretched manner. Think of the Awesome Analytics dashboard. The following figure of the dashboard illustrates this behavior:
Figure 3.1 – The Awesome Analytics dashboard with its sidebar and some chart boxes marked with colors
The sidebar (1), marked with a red border, stretches to fill the entire height. We can see this with the white and gray backgrounds. Its content wouldn’t take up that much space, in any case. The same behavior applies to the chart boxes.
We see in the first row that a pie chart fits in a single grid cell, as shown in the chart box marked with blue (2), but the chart stretches to its available space when defined as such, as illustrated by the chart box marked in orange (3).
In most cases, this is the expected and desired behavior. However, in some cases, we’d like grid items only to take up as much space as their content, and in other cases, we don’t even want the grid to fill the entire space available. Not spanning the entire available space is especially interesting for responsive page layouts built with grids.
To achieve these behaviors, CSS Grid lets us steer where it should place and justify items and where it should place and justify the entire grid within its container.
Aligning and justifying items
First, we will look at the placement and justification of individual grid items. A practical example is tags or pills. We often see these at the beginning or end of blog posts to indicate some kind of category or to lead to related content.
Consider the following HTML code:
<!-- File: chapter3/01_placing_grid_items.html --><div class="tag-container">
<div class="tag">Some</div>
<div class="tag">Random</div>
<div class="tag">Tags</div>
<div class="tag">That</div>
<div class="tag">Take up space</div>
<div class="tag">And could also take up quite a lot of space</div>
<div class="tag">But</div>
<div class="tag">Could also be short</div>
<div class="tag">Just like</div>
<div class="tag">Some</div>
<div class="tag">Of</div>
<div class="tag">The pills</div>
<div class="tag">In</div>
<div class="tag">This</div>
<div class="tag">Example</div>
<div class="tag">Banana</div>
</div>
We can see 16 tags defined as single div tags with a tag class in a container element with the tag-container class. (Going off on a tangent, I think 16 tags are way too many. I’m sure content experts agree here: that many tags blur the focus, and I’m pretty sure the content that actually needs 16 tags isn’t the most focused to begin with. Anyway, back to CSS Grid.)
Let’s apply a grid structure to them and add some styling for the tag pills by giving them a rounded border and a background color:
.tag { background-color: #aec6cf;
padding: 10px;
font-family: sans-serif;
border-radius: 20px;
}
.tag-container {
display: grid;
gap: 5px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
This code puts all 16 tags in a grid of four columns with automatically defined rows, as illustrated in the following figure:
Figure 3.2 – All 16 tags aligned in a grid
As described in the section introduction, the stretching of the elements happens regardless of how it looks. Especially in the second row from the top and the first three columns from left: the Take up space and But grid items are stretched over the entire width of the columns and even take up more vertical space than necessary since the grid item with the content And could also take up quite a lot of space needs two rows and stretches the entire track.
The design doesn’t even resemble a pill design. Instead, it looks more like a grid of randomly arranged words (which it basically is), somehow reminding us of website navigation from the early 2000s.
It all boils down to how the items are stretched in height and width. If we didn't want to stretch them, we could add containers around the pills, effectively decoupling them from the grid. If we wanted to align and justify them, we could use Flexbox. However, this method would add a lot more HTML and CSS to our code, which isn’t necessary.
Consider the following CSS code as a possible Flexbox solution to the preceding problem:
.tag { background-color: #aec6cf;
padding: 10px;
font-family: sans-serif;
border-radius: 20px;
flex: 1 0 25%;
max-width: calc(25% - 5px);
box-sizing: border-box;
}
.tag-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
gap: 5px;
}
We can see that the amount of CSS has grown from 11 lines necessary for the arrangement to a total of 16 lines. We needed to add explicit box-sizing to the tag class and calculate a maximum width that takes the gap into account to arrive at a four-column layout.
More complex layouts require additional DOM as well. We will further discuss the differences with Flexbox in Chapter 5, Implementing Layouts with Flexbox and CSS Grid. There’s an alternative to the extra-container-and-flexbox method. CSS Grid offers four properties: align-items, justify-items, align-self, and justify-self. Those seem familiar: Flexbox uses similar ones as well.
Unlike the Flexbox versions, the align-* and justify-* properties used in CSS Grid are not dependent on any main axis. Instead, they always align with the same axis:
- The align-* properties align along the column axis, so the Y axis on the screen in the standard writing mode
- The justify-* properties align along the row axis, meaning the X axis on the screen in standard writing mode
We can either align and justify all items within a grid with the *-items properties defined on the grid container or align and justify individual grid items with the *-self properties defined on the items themselves.
A note on readability
We mean both variants when talking about justify-* and align-*. So, justify-* stands for justify-items and justify-self, whereas align-* stands for align-items and align-self.
The same applies to *-items and *-self, meaning both variants. So, *-items stands for justify-items and align-items, whereas *-self stands for justify-self and align-self.
Using the align properties
The align-* properties can take one of five different values:
- stretch stretches the grid item to fill the entire grid cell and is the default value.
- start aligns the grid items with the start of the grid cell on the column axis, meaning the top of the grid cell.
- end aligns the grid items with the end of the grid cell on the column axis, meaning the bottom of the grid cell.
- center aligns the items with the center of the grid cell on the column axis and ensures equal space from the item to the start and end of the grid cells.
- baseline aligns the grid items along the text baseline of the entire row. This value is especially useful for differently sized text that should all be on the same line.
Let’s try. By adding align-items: center; to the .tag-container class, CSS Grid aligns all elements to the center of their row.
The following figure shows the result:
Figure 3.3 – The pill layout with its items being centered
In the second row, we can see the effect: although the And could also take up quite a lot of space item enlarges the row, the other items keep the same height and are centered in their row.
Similar effects with different placements can be observed when using start or end. However, baseline behaves differently.
The following figure explains what is meant by the text baseline.
Figure 3.4 – The baseline and several other keywords related to text sizing explained
The baseline is marked in red. It defines where all characters, except those with a descender, are aligned. This line is used to align all the text when using align-items: baseline; or align-self: baseline;.
Let’s try this as well. To illustrate, we assign some top and bottom padding to some pills to ensure we can observe the effect of align-items: baseline;.;. The result is illustrated in the following figure:
Figure 3.5 – Aligning items to the text baseline
We can see how the items are adjusted to a common baseline per row in the second to last row. The baseline value also offers two modifiers: first baseline and last baseline. These two modifiers use the first or the last baseline in the case of multi-line text.
A note on browser compatibility
As of 2023, the last baseline modifier has only limited browser support. While fully supported by all browsers for the align-self and align-items properties, support for align-content is limited.
Using the justify properties
The justify-* properties align grid items on the row axis. They take one of four different values:
- stretch stretches the item to fill the entire width of the grid cell and is the default value
- start aligns the item with the start of the grid cell, meaning its left side (LTR)
- end aligns the item with the end of the grid cell, meaning its right side (LTR)
- center aligns the item with the center of the grid cell, ensuring equal spacing on the left and right side
To practice, we add justify-items: center; to the container. The following figure shows the effect:
Figure 3.6 – The pill layout with horizontally centered grid items
To finish the pill layout, we can use both justify-items: center; and align-items: center; to center the grid items horizontally and vertically in their grid cells. The result can be observed in the following figure:
Figure 3.7 – The pill layout centered vertically and horizontally using the justify and align properties
When we take the And could also take up quite pace item as a reference, we can observe that the items on the same row and same column are centered.
Using shortcuts
To shorten the code, we can use place-items as a shortcut for align-items and justify-items, as well as place-self as a shortcut for align-self and justify-self. These shortcuts work by either specifying the same value for both align-* and justify-* or assigning them specific values, separated by a space. For example, if we wanted to use a single property for the finished, all-centered pill layout, we use place-items: center; instead of justify-items: center; and align-items: center;.
However, different values mean we need to specify them individually, as the following code snippet shows:
.tag-container { align-items: baseline;
justify-items: start;
}
/* is equivalent to */
.tag-container {
place-items: baseline start;
}
The place-* shortcuts always take the value of align-items first, then the value of justify-items.
Aligning and justifying the entire grid within its container
Sometimes, our grid is smaller than our container. Think of a grid layout for an entire page on an ultra-wide screen with a screen ratio of 21:9. These screens usually have a resolution of a whopping 3440px in width and 1440px in height. They are arguably not very common, and that is the exact reason most websites are not optimized for them.
On such an ultra-wide screen, a 12-column grid with a gap of 30px would result in columns roughly 260px wide. Too wide for most content. At some point in time, grid systems started to emerge, one being 960px in total width with 12 columns and a gap of 20px, making each column 60px wide. These grid systems allowed UX experts and developers to speak a common language and simplified development with a large palette of ready-to-use code templates. Even frameworks started implementing them.
In 2020 or 2021, the trend shifted to grids with a total width of around 1200px (still only a third of an ultra-wide screen, mind you) and 30px gaps. Even with the perhaps most used screen resolution on a desktop of a 1920px width, 1200px is still only roughly 60% of the available width.
We notice that, on larger screens, we usually don’t need the entire screen width for content. This has good reasons: first, most content wouldn’t fit. For example, an image or video with a ratio of 16:9 spread over a 1920px width would be full-screen. Other ratios, such as 4:3 or 1:1, would overflow the viewport, making it impossible to see the entire image or video simultaneously.
The second reason is text width: from books, newspapers, and smartphones, users are used to reading short lines of text. The Baymard Institute, an independent web UX research institute, has studied the optimal line length and concluded it to be between 50 and 75 characters. We can read about its findings in this article: https://baymard.com/blog/line-length-readability.
Additionally, Schneps et al. have shown in their 2013 paper that people with dyslexia show improved reading speeds on smaller devices with no cost to comprehension. We can read their excellent paper on the website of the US National Library of Medicine’s National Center for Biotechnological Information: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3734020/.
Spanning a paragraph over 1920px, or, even worse, 3440px, would cause frustration and even look visually broken. The third reason is page navigation. The larger the distance between objects, the more I have to move my mouse cursor, and the less connected individual components feel.
Most CSS frameworks offer a container class with a maximum width of the used grid system that positions its content as horizontally centered. Often, these work with either Flexbox or the ol’ reliable margin: 0 auto; for centering to avoid having extra containers.
However, with CSS Grid, there’s no need for extra containers or margin tricks to achieve a centered layout that does not span the entire screen width.
To illustrate, let’s have a look at the following HTML:
<!-- File: chapter3/03_placing_grid_content.html --><!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
<header class="header">
<!-- Header + navigation -->
</header>
<aside class="sidebar">
<!-- Sidebar -->
</aside>
<main class="main">
<!-- Content -->
</main>
<footer class="footer">
<!-- Footer -->
</footer>
</div>
</body>
</html>
It’s a standard page layout: a container element with a header, a sidebar, and a footer. We apply the following CSS code to the HTML:
* { box-sizing: border-box; }body, html {
min-height: 100vh;
padding: 0;
margin: 0;
}
.container {
border: 10px solid #333;
min-height: 100vh;
display: grid;
grid-template:
"header header" 100px
"sidebar content" 1fr
"footer footer" 100px
/ 200px 1fr
;
}
header {
border: 2px solid #dd0808; /* Dark red */
background-color: #ff6666; /* Light red */
grid-area: header;
}
aside {
border: 2px solid #0ba7c6; /* Dark cyan */
background-color: #74ddf2; /* Light cyan */
grid-area: sidebar;
}
main {
border: 2px solid #6f09e5; /* Dark purple */
background-color: #b880f7; /* Light purple */
grid-area: content;
}
footer {
border: 2px solid #c4be0d; /* Dark yellow */
background-color: #f7f380; /* Light yellow */
grid-area: footer;
}
This sets up a standard page layout that spans the entire width and height of the browser and gives the elements some color (namely red for the header, cyan for the sidebar, purple for the content, and yellow for the footer), so we can distinguish the elements.
We also added a thick border to the container to see where it is. It also aligns all elements within the grid. We get the following result on a 1,920 x 1,080 display:
Figure 3.8 – A page layout spanning the entire screen width
We see that the sidebar in cyan, which takes up 200px of space, is relatively narrow compared to the content element in purple. The sidebar feels lost and is almost out of sight on large displays.
Ideally, the content column wouldn’t take up 1fr of space but a value of 1000px. The following figure illustrates what the size change would look like:
Figure 3.9 – The layout with a fixed-size content column
We see a significant portion of whitespace on the right of the layout. The dark border around the entire figure shows us that our grid content only occupies about half of the available space. However, the content sticks to the left side of the screen.
Depending on the design we might implement, this isn’t always the desired outcome. However, CSS Grid offers us two properties to align and justify the content of a grid: align-content and justify-content.
They function similarly to align-items and justify-items, as they use the same axis (align-content aligns along the column axis, and justify-content works along the row axis) and have similar values. However, they align and justify the entire grid instead of items within it.
Justifying grid content on the row axis
Let’s have a look at justify-content first. This property takes one of seven different values:
- start is the default value and justifies the grid content to the start of the container, meaning the left side.
- end justifies the grid content to the end of the container, meaning the right side.
- center centers the entire grid in its container.
- stretch stretches the grid content to fit the container if no explicit values are given.
- space-around adds an even amount of space between grid columns and half of the same space around them, much like Flexbox’s justify-content: space-around;.
- space-between adds an even amount of space between grid columns but no space around them.
- space-evenly adds the same amount of space between all grid columns and around them.
Let’s experiment a bit with these values. Let’s assume we’d like to center the content first to adjust it further. We add the following code to the grid container definition of .container:
.container { display: grid;
/* … */
justify-content: center;
}
When we reload the page on the same screen size, we see the grid now arranged in the center, as illustrated by the following figure:
Figure 3.10 – The grid layout, centered
We notice that the space around the grid is now even on both sides and that the size of the colored grid cells hasn’t changed. However, we might feel that the grid feels a little lost in the center and that the sidebar feels cramped with the content. Therefore, we now replace center with space-around and have another look at the result, shown in the following figure:
Figure 3.11 – The grid layout, its columns being aligned on the column axis with space around
We see that there is now a significant portion of whitespace between the sidebar in cyan and the content in purple. We also see that the header and footer still span the entire grid content width. The next value we’d like to try is space-between. The result is shown in the following figure:
Figure 3.12 – The grid layout, its columns aligned on the column axis with space between
We can see that the grid content now spans the entire grid container again. The red header bar spans from the far-left side to the far-right side. However, the columns haven’t changed in size and are now separated by a lot of whitespace.
The last value we’d like to try is space-evenly. The result is shown in the following figure:
Figure 3.13 – The grid content is spaced evenly
We now see that the whitespace between the columns is the same size as the whitespace to the left and right of the grid.
Aligning content along the column axis
To align and justify items on the vertical axis, meaning the column axis in standard writing mode, we use align-content. It takes the exact same values, namely start, end, center, stretch, space-around, space-between, and space-evenly, and works the same as justify-items, only in the vertical direction.
The align-content property is handy for small pages or sections of pages that don’t use the entire available height.
Let’s have a look at our original grid container definition again:
.container { border: 10px solid #333;
min-height: 100vh;
display: grid;
grid-template:
"header header" 100px
"sidebar content" 1fr
"footer footer" 100px
/ 200px 1fr
;
}
We see that the second row, containing the sidebar and the content, takes up 1fr of space, meaning the grid container takes up all available space. So let’s set it to an explicit height of 600px and look at the result:
Figure 3.14 – The grid layout, reduced in height
We see that the grid content has a reduced height, and the rest of the grid is filled with whitespace. In addition, we see that the grid content is sticking to the top of the grid container, indicating the default value of align-content being start.
When we add align-content: center; to the grid definition, the grid content will be centered vertically, as shown in the following figure:
Figure 3.15 – The vertically centered grid content
We see an equal amount of whitespace at the top and bottom of the grid.
Using shortcuts
There is also a shortcut for align-content and justify-content called place-content. This property works similarly to the place-items shortcut: it takes values for both align-content and justify-content. It can define a single value for both properties or distinct values for each property, separated by a space.
Let’s assume the following grid container definition:
.container { border: 10px solid #333;
min-height: 100vh;
display: grid;
grid-template:
"header header" 100px
"sidebar content" 1000px
"footer footer" 100px
/ 200px 1fr
;
align-content: center;
justify-content: space-between;
}
We can shorten the usage of align-content and justify-content, as shown in the following code snippet:
.container { border: 10px solid #333;
min-height: 100vh;
display: grid;
grid-template:
"header header" 100px
"sidebar content" 1000px
"footer footer" 100px
/ 200px 1fr
;
place-content: center space-between;
}
A single value in place-content, such as center, would set both align-content and justify-content to center.
We have now learned how to precisely steer the arrangement of grid items within grid cells and the entire grid container. With these techniques, we use less HTML, don’t have to use Flexbox to center things, and can add more complexity to our layouts.
Defining and using advanced grid templates
So far, we’ve looked at explicitly named grid areas defined with grid-template-areas. We looked at how we can define header bars that span multiple columns, arrange items automatically or explicitly in these areas, and learned how to leverage grid areas to create standard layouts.
However, there’s more to grid areas. We can define cells that will always be empty, name grid areas by their grid lines, or even arrange nested child elements in parent grids using grid areas. First, we’ll look at always-empty grid cells.
Defining empty cells in grid area templates
Sometimes, we want grid cells always to stay empty. This is the case for layouts that use the entire width of the grid container for header and footer bars but not for the main content area.
Let’s look at the following HTML code:
<div class="container"> <header class="header">
<!-- Header + navigation -->
</header>
<main class="main">
<!-- Content -->
</main>
<footer class="footer">
<!-- Footer -->
</footer>
</div>
To place all the items in the grid, we use the following CSS:
.container { border: 10px solid #333;
min-height: 100vh;
display: grid;
grid-template:
"header" 100px
"content" 1fr
"footer" 100px
/ 1fr
;
}
header {
border: 2px solid #dd0808; /* Dark red */
background-color: #ff6666; /* Light red */
grid-area: header;
}
main {
border: 2px solid #6f09e5; /* Dark purple */
background-color: #b880f7; /* Light purple */
grid-area: content;
max-width: 1000px;
}
footer {
border: 2px solid #c4be0d; /* Dark yellow */
background-color: #f7f380; /* Light yellow */
grid-area: footer;
}
We see that the header, content, and footer elements are all in a single column that spans the entire grid. We do want the header and footer to span the entire width, but the main content should only be 1000px wide and be centered. Using place-content for this endeavor would be difficult, if not impossible, since we can only adjust the size of entire columns, not single cells.
However, we can add two more columns. The header and footer should span all three, and the content should only occupy the center. The two adjacent grid cells on the horizontal axis should always stay empty. To achieve empty grid cells, we use the dot character (.) as the grid area’s name, as illustrated in the following CSS code:
.container { border: 10px solid #333;
min-height: 100vh;
display: grid;
grid-template:
"header header header" 100px
". content ." 1fr
"footer footer footer" 100px
/ 1fr 1000px 1fr
;
}
Since the grid areas specified for the header, main, and footer haven’t changed, these grid cells will stay empty. Also, browsers refuse to use the dot character when assigning grid areas with grid-area, making it impossible to occupy the cells on purpose.
The result of this code is shown in the following figure:
Figure 3.16 – A centered main element with a full-width header above and a footer below
We can see that there is whitespace around the purple main element and that it is centered, the exact result we wanted to achieve.
However, there are limitations to the dot notation. When auto-arranging grid items, CSS Grid does not automatically respect grid areas and their naming. We saw in Chapter 1 that elements occupy only the single next free grid cell within the grid’s flow if no grid area is specified.
Even if the grid area they would fall in spans multiple grid cells, only a single cell is occupied. This is also true if they’re meant to be empty and use the dot notation as their name! The dot notation only keeps us, developers, from putting things there.
A note on using the same name for multiple grid areas
Technically, the following grid area definition creates two different grid areas that are named the same:
grid-template:
"header header header" 100px
". content ." 1fr
"footer footer footer" 100px
/ 1fr 1000px 1fr
;
Usually, grid areas with the same name need to be connected; otherwise, browsers would deem the grid template invalid and simply ignore it. For example, the following grid template is an illegal one because it uses two grid areas with the same name:
grid-template:
"navigation" 1fr
"content" 1fr
"navigation" 1fr
/ 1fr
;
However, we can create as many grid areas named . as we’d like since they’re meant to be empty and cannot be used.
Naming grid areas implicitly
Apart from using grid templates, there is another way we can implicitly name grid areas. We can also assign names to grid areas using named rows and columns. To recap what we learned in Chapter 1, Understanding the Basic Rules and Structures for CSS Grid, we can assign names to grid lines using the following syntax:
grid-template-columns: [sidebar-start] 1fr [sidebar-end content-start] 3fr [content-end];
In this example, we assigned the name sidebar-start to the first grid line, the names sidebar-end and content-start to the center grid line, and content-end to the rightmost grid line. We can do the same for rows:
Grid-template-rows: [header-start] 100px [header-end content-start] 1fr [content-end];
As we can see in these two definitions, we’ve assigned a horizontal and a vertical grid line with content-start and a horizontal and a vertical grid line with content-end. The intersection points of these grid lines create a grid area named content.
We can see what exactly happened in the following illustration:
Figure 3.17 – Grid lines that implicitly create a grid area
We can see that the content-* grid lines enclose a rectangle in the second row and second column. Since the grid lines start with content, the grid area is named as such.
Since we can assign as many names to grid lines as we’d like, we can use these to encase all kinds of grid areas. This behavior also works the opposite way: explicitly named grid areas implicitly create grid lines with *-start and *-end variants.
Let’s assume we want to rebuild the following grid template with named grid lines:
.container { display: grid;
grid-template:
"header header" 100px
"sidebar content" 1fr
"footer footer" 100px
/ 300px 1fr;
}
We’ve got a top row that spans two columns named header, a single cell named sidebar, a single cell named content, and a row that spans two columns named footer.
We, therefore, need two columns and three rows. We can start by assigning names to all grid lines encapsulating the header:
.container { display: grid;
grid-template-columns: [header-start] 300px 1fr
[header-end];
grid-template-rows: [header-start] 100px [header-end]
1fr 100px;
}
We then add the sidebar the same way:
.container { display: grid;
grid-template-columns: [header-start sidebar-start]
300px [sidebar-end] 1fr [header-end];
grid-template-rows: [header-start] 100px
[header-end sidebar-start] 1fr [sidebar-end] 100px;
}
Next, we add the content area:
.container { display: grid;
grid-template-columns: [header-start sidebar-start] 300px
[sidebar-end content-start] 1fr [header-end content-end];
grid-template-rows: [header-start] 100px [header-end
sidebar-start content-start] 1fr
[sidebar-end content-end] 100px;
}
This code is starting to become less and less readable. The last thing missing is the footer. So we add it the same way:
.container { display: grid;
grid-template-columns: [header-start sidebar-start
footer-start] 300px [sidebar-end content-start] 1fr
[header-end content-end footer-end];
grid-template-rows: [header-start] 100px [header-end
sidebar-start content-start] 1fr [sidebar-end
content-end footer-start] 100px [footer-end];
}
We see that the grid lines have up to three names. Every area is encapsulated with its respective grid lines and implicitly creates the grid area.
We’ve already noticed that the code for these grid area definitions is becoming less and less readable the more grid areas we add. The grid-template property should therefore be favored since it is much more readable.
However, if we generate grids via code, say, from a Content Management System (CMS) or based on user-generated content, creating a grid template with the grid-template syntax is much more challenging. For example, suppose we offer the user a grid they can place elements in.
By placing an element, we only need to know its starting and ending grid rows and assign a name. Implicitly named grid lines simplify the automatic creation of grid areas while keeping the advantages of naming, which significantly helps to debug in cases of misarranged grid items, and changes to existing layouts, as well as easing onboarding new developers to the project.
Practicing creating flexible layouts with JavaScript
Let’s create a flexible grid area structure with JavaScript. We can place this JS code wherever we’d like in our app. Let’s assume the following HTML structure:
<!—File: chapter3/05_flexible_grid.html 
<div cla"s="flexible-g"id">
<div
cla"s="flexible-grid-i"em"
data-na"e="fi"st"
data-row-sta"t""1"
data-row-wid"h""1"
data-col-sta"t""1"
data-col-wid"h""2"
>
First element
</div>
<div
cla"s="flexible-grid-i"em"
data-na"e="sec"nd"
data-row-sta"t""2"
data-row-wid"h""1"
data-col-sta"t""2"
data-col-wid"h""1"
>
Second element
</div>
<div
cla"s="flexible-grid-i"em"
data-na"e="th"rd"
data-row-sta"t""1"
data-row-wid"h""1"
data-col-sta"t""3"
data-col-wid"h""1"
>
Third element
</div>
</div>
We see a grid container with three elements. Each of the three elements has several data-* attributes, denoting the element’s name, which row and column it starts in, and how large it is. We’ll use these data attributes to generate a grid with JavaScript automatically. If you’re not familiar with JavaScript, don't worry. We’ll keep it at a minimum.
First, we need to get the grid and all its elements. We also create two empty arrays for row grid lines and column grid lines:
const grid = document.querySelect'r('.flexible-g'id')const gridElements = Array.from(grid.querySelectorAll
('.flexible-grid-item'))
let rowGridLines = []
let columnGridLines = []
Next, we loop over all the grid items and extract their names, grid row start, grid row end, grid column start, and grid column end:
for (const element of gridElements) { const name = element.dataset.name
const rowStart = parseInt(element.dataset.rowStart) - 1
const rowEnd = parseInt(element.dataset.rowWidth) +
rowStart
const colStart = parseInt(element.dataset.colStart) - 1
const colEnd = parseInt(element.dataset.colWidth) +
colStart
/* More code here... */
}
We subtract 1 from the rowStart and colStart variables to make them zero-indexed. We then check that we don’t already have any elements at their respective grid lines and assign empty arrays to fill them later.
With this approach, each unused grid line has a value of undefined, and each used grid line has an array of its names as its value:
for (const element of gridElements) { /* rowStart, rowEnd, etc. */
if (!rowGridLines[rowStart]) {
rowGridLines[rowStart] = []
}
if (!rowGridLines[rowEnd]) {
rowGridLines[rowEnd] = []
}
if (!columnGridLines[colStart]) {
columnGridLines[colStart] = []
}
if (!columnGridLines[colEnd]) {
columnGridLines[colEnd] = []
}
/* More code here... */
}
We then add the grid line names to their respective positions in these arrays and assign the grid area to the grid element:
for (const element of gridElements) { /* All previous loop code */
rowGridLines[rowStart].push(name + '-start')
rowGridLines[rowEnd].push(name + '-end')
columnGridLines[colStart].push(name + '-start')
columnGridLines[colEnd].push(name + '-end')
element.style.gridArea = name
}
We then create the grid row and grid column templates by concatenating the grid line names with spaces, surrounding them with square brackets, and adding a value of 1fr for each grid row and column:
const rowTemplate = rowGridLines.map(r => { if (r) {
return '[' + r.join(' ') + ']'
}
return ''
}).join(' 1fr ')
const columnTemplate = columnGridLines.map(r => {
if (r) {
return '[' + r.join(' ') + ']'
}
return ''
}).join(' 1fr ')
grid.style.gridTemplateColumns = rowTemplate
grid.style.gridTemplateRows = columnTemplate
This code automatically creates grid rows and columns and aligns the elements accordingly.
With this JavaScript code, we could create React, Vue, or Svelte (or any other framework, really) components that automatically create grids for us, depending on their child components. This approach gives us much flexibility, and we can adjust the grids on the fly with JS.
Arranging nested child elements in parent grids
We all know the struggle: sometimes, designs can’t be sensibly implemented with semantic HTML – for example, on a news site. We might have a grid layout with four columns and an infinite number of rows.
For example, the first five articles might always be the recently published ones, followed by the most read articles. We could divide these article groups into sections to add labels for screen readers and semantically separate the two categories.
One solution would be to add a grid to every section. However, this would result in a gap of three empty grid cells in the first section. CSS Grid offers a solution to this: display: contents;. It tells the browser to ignore this element and use its children as grid elements instead.
Let’s consider the following HTML structure:
<div class=»container»> <section class=»recent-articles»>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
<section class="most-read-articles">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</div>
It corresponds with the example we’ve discussed: we’ve got a section with the 5 most recent articles and a second section with 11 more articles that are the most read. Let’s apply the following CSS:
.container { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 100%;
grid-auto-rows: 200px;
gap: 24px;
box-sizing: border-box;
min-height: 100vh;
border: 10px solid #333; /* Border to indicate
grid boundaries */
}
.recent-articles article {
border: 2px solid #c4be0d; /* Dark yellow */
background-color: #f7f380; /* Light yellow */
}
.most-read-articles article {
border: 2px solid #0ba7c6; /* Dark cyan */
background-color: #74ddf2; /* Light cyan */
}
We’ve added some color to the articles and defined a four-column grid with automatically created rows that are 200px tall. This structure would now try to align the sections within the grid, resulting in what we see in the following illustration:
Figure 3.18 – A failed attempt to arrange semantic HTML in a grid
We see a yellow and a cyan bar in the top-left corner of our grid, indicating the zero-height article elements of this color. This is not what we’d like. Ideally, the article elements themselves would be aligned in the grid. We can achieve this by applying the following CSS code:
section { display: contents;
}
This results in the following grid structure:
Figure 3.19 – The article grid working as intended
We see that the first 5 articles in yellow occupy the first row and parts of the second row, followed immediately by 11 cyan articles, without any empty grid cell in between. Exactly what we wanted.
A note on the browser compatibility of display contents
As of 2022, display: contents; is supported in all major browsers. However, there are some limitations. In most browsers (namely Opera, Firefox, Chrome, Edge, and any Chromium-based browsers), buttons lose their accessibility when display: contents; is applied to them. In Safari, buttons work, but it is tables that become inaccessible.
With this knowledge, we can create any grid structure we’d like. We can even go as far as dynamically creating grids and keeping them debugging-friendly.
Creating subgrids
Subgrids are a feature similar to display: contents;. They allow us to arrange child elements in a parent grid. However, the approach of the subgrid feature is different; an element with a subgrid has its own grid that inherits grid lines from its parent grid. We can use a subgrid either for rows, columns, or both.
To apply a subgrid to a child element, we apply display: grid; to it and use subgrid as a value for either grid-template-columns, grid-template-rows, or both.
How to practice
For this section, we need to have either the latest versions of Firefox or Safari because, as of 2023, no Chromium-based browser supports subgrids.
Understanding how subgrids work
At the beginning of this section, we mentioned that a subgrid creates a grid on a child element that inherits grid lines from a parent grid. To illustrate what this means, let’s have a look at the following figure:
Figure 3.20 – A three-by-two grid with a grid item spanning the rightmost two cells of the first row
We can see a three-by-two grid with a single grid item that spans two grid cells on the first row. We indicated this with a red border. All grid lines of the grid are marked in black.
The grid item we see currently works as an independent container. If we were to mark it as a grid by using display: grid, we could define the grid however we’d like without any connection to the parent grid. However, the third vertical grid line from the left would theoretically go right through the middle of the element.
By applying grid-template-columns: subgrid; to the grid item (assuming it already has display: grid; applied to it), we would make the vertical grid lines available to this grid item, resulting in what we can see in the following figure:
Figure 3.21 – The previous grid, with the inherited grid line visible
Since the grid item inherits the grid lines from the parent, it now has two columns. We can use these columns as if they were defined by the grid item’s – well – subgrid.
The same behavior of the subgrid applies to rows and horizontal grid lines by applying grid-template-rows: subgrid; to the same container. In the previous example, the grid item only spans a single row and would not inherit anything. However, larger elements spanning multiple grid rows would inherit the horizontal gridlines, too.
Understanding what is inherited
As we know, a grid can consist of more than simple row and column definitions. There are also gaps and, if defined, names for grid areas and lines. When we apply a subgrid, these properties are inherited as well.
This means that all grid line names and implicitly defined grid areas are also available to the subgrid. However, this requires both rows and columns to be defined as subgrids.
Understanding subgrids’ current state of development (as of 2023)
The subgrid feature is currently only supported in Firefox and Safari as of 2023. However, there is an open ticket on the Chromium bug tracker that should implement subgrid for Chromium and, therefore, all Chromium-based browsers, such as Google Chrome and Microsoft Edge. The bug has been open since 2016, so let’s hope it’ll be implemented soon.
Subgrids are a powerful tool that allows us to separate the grid structure even more from the HTML structure and keep layouts consistent when using nested grids. For example, we can now use an arbitrary container within the grid and overwrite its rows or columns while explicitly keeping the other. Other use cases include alignment in otherwise separated elements, such as tag lists, titles, or images on card elements.
Masonry layouts
Before the days of CSS Grid, masonry layouts were hard to achieve. The npm library masonry-layout, arguably very popular, still has around 200,000 weekly downloads according to the statistics on https://www.npmjs.com/, although it hasn’t been updated since roughly 2018, as of 2022.
The library can arrange grid items in a masonry layout with a staggering 239 lines of code. It measures column widths, item widths, and a gutter, and applies a whole lot of CSS to achieve what is nowadays possible with CSS Grid.
A note on browser compatibility
As of early 2023, only Firefox offers masonry layouts behind a feature flag, so we won’t be able to use it in production yet. Most of the masonry-related CSS attributes are in an experimental state.
We learn about this technology to be immediate experts once it's widely available.
Understanding what masonry layouts are
So, what exactly is a masonry layout? The name has nothing to do with building walls, although a masonry layout resembles brickwork. With differently sized elements stacked on top of each other, a brick wall-like structure emerges, which some design experts love and others detest.
Pinterest is one of the most popular sites that uses a masonry layout as of 2022. It arranges what it calls ideas (basically, one or more images with a title and some tags) in columns, and keeps images in their original ratio. These images lead to elements of all heights, but equal widths, as shown in the following illustration:
Figure 3.22 – An illustration of a masonry layout
One of the main features of the masonry layout is the equal-ish height distribution of elements. One could argue that 239 lines of JavaScript code could be replaced by simply dividing all elements into four groups and placing these next to each other, but that may not always work as intended.
To achieve a complete masonry layout, we want an equal height distribution. For that, the JS library we learned about in the beginning measures the height of all involved elements before rearranging them.
Using masonry layouts with CSS Grid and knowing about its pitfalls
We can use the experimental features of CSS Grid’s masonry layout instead of using JS. To apply a masonry layout to either rows or columns, we can assign the masonry value to grid-template-columns or grid-template-rows. CSS Grid will then measure the sizes of all involved elements and align them accordingly.
Multiple related CSS attributes let us influence how CSS Grid arranges the elements:
- align-tracks can take one or more of the following values: start, end, center, normal (the same as start), baseline, first baseline, last baseline, space-between, space-around, space-evenly, or stretch. The align-tracks CSS property sets the alignment of all (when a single value is given) or individual grid tracks if a list is given. It works along the column axis.
- justify-tracks behaves the same way as align-tracks, only along the row axis.
- masonry-auto-flow defines how items are placed within a masonry layout. It can take one of the following values: pack (the item is placed into the masonry track with the most left-over space), next (the item is placed into the next masonry track, no matter the space), ordered (ignores the placement according to a masonry layout and keeps the HTML order), or definite-first (places items with a pre-defined slot first, before applying the masonry algorithm to the next items). A combination of pack or next and definite-first and ordered is also possible and mixes their behaviors.
Keep in mind, though, that in a default masonry setting, the elements’ sizes influence their placement, which, in turn, impacts accessibility. A screen reader or web crawler, such as Googlebot, may not know about the rearrangement of the elements, and users that use screen readers might have an entirely different browser experience from users that don’t. Worse even, the difference in visual order and logical order is not compliant with the WCAG 2.0 Technique C27, which can be found here: https://www.w3.org/TR/WCAG20-TECHS/C27.html.
However, there are currently efforts to allow authors to opt into following the visual rather than the logical order. The current state of the discussion is documented in this GitHub issue in the csswg-drafts respository of the W3C: https://github.com/w3c/csswg-drafts/issues/7387.
With this experimental knowledge, we are prepared for the release of CSS Grid’s masonry layout for all major browsers. We can then eliminate any JS library and use CSS instead.
Practicing with Awesome Analytics
Now that we’ve learned about the advanced concepts of CSS Grid and how to create and steer advanced CSS Grid layouts, it’s time to practice.
Receiving the task
After the first round of adding layouts to Awesome Analytics, the stakeholders were amazed. However, they asked for several improvements to the grid dashboard, the overall layout, and some visual adjustments.
They feel parts of the current design are old-fashioned and would like to improve a few things. First, they want to eliminate any gaps, as they feel that the chart boxes offer enough whitespace. Second, the gray background should be gone.
The design experts also feel that the app is missing a vertical rhythm. Ideally, all components (namely the header, all navigation points, and charts) should be aligned in rows of 40px with no gap. A standard chart box should be 10 rows tall and span 1 column, whereas tall chart boxes should span 20 rows. Wide chart boxes should span two columns.
Also, the management decided to ditch Chrome and only offer Firefox and Safari support. We pull the changes from our Git server and reload. What we see is this:
Figure 3.23 – Awesome Analytics without a grid layout
The development team tells you that they’ve already removed all the previous grid code and made the necessary adjustments to paddings, margins, and borders, so we only need to care of the grid layout.
Implementing a possible solution
We can find the starting code base for this exercise on GitHub: https://github.com/PacktPublishing/Mastering-CSS-Grid/tree/main/chapter3.
To get started, we download a copy via Git or the browser and follow the instructions in Chapter 2, Project Introduction: What We’ll Work on and First Tasks, in the Setting up Awesome Analytics locally section. When we inspect the code, we see that not much has changed. Some of the original CSS code of margins and spacing has changed, but overall, it’s the same.
We now need to apply a grid layout to the app. To practice, we’ll use subgrids, as the requested support for Firefox and Safari only allows us to do just that. We begin by applying a grid to the body. Since we’ll have a ton of rows, we use grid lines to create a header area implicitly.
Then, with two additional names for the content, we tell CSS Grid not to overlap the content with the sidebar. Finally, we directly assign the page header to the grid area header:
body { display: grid;
grid-template-columns: [header-start] auto [content-
start] 1fr 1fr 1fr 1fr [content-end header-end];
grid-template-rows: [header-start] 40px 40px
[header-end];
grid-auto-rows: 40px;
}
.page-header {
grid-area: header;
}
Next, we take care of the sidebar and the content. Since CSS Grid will determine the subgrid based on the parent grid, the elements need to have an explicit row count. CSS Grid does not create new grid tracks but inherits the ones defined on the parent grid. If the element with the subgrid does not define its row or column count, CSS Grid assumes one row worth of height and one column worth of width. It then places all elements in the available space, essentially overlapping them.
We, therefore, need to count rows. When we count all rows occupied by the chart boxes, we arrive at a total of 80 rows (2 tall and 4 short chart boxes mean 2 * 20 + 4 * 10 = 80 rows). So, for the sidebar to span the entire height, we tell it to span 80 rows.
Since the sidebar’s links are deeply nested, first, mark the sidebar itself as a subgrid and use display: contents; on both the nav element and every ul element; make the li elements behave like the sidebar's grid items. The sidebar should span the entire 80 rows we counted earlier:
.sidebar { display: grid;
grid-template-rows: subgrid;
grid-row: span 80;
}
nav,
nav > ul {
display: contents;
}
Now, we align the chart boxes. For that, we tell the element with the main-page-content class to align itself in the grid area called content and also span 80 rows. We then use subgrid as values for both grid-template-rows and grid-template-columns to use both the rows and columns of the parent grid:
.main-page-content { display: grid;
grid-area: content;
grid-row: span 80;
grid-template-rows: subgrid;
grid-template-columns: subgrid;
grid-auto-flow: row dense;
}
Finally, we add sizing to the grid boxes by using grid-column and grid-row properties with their respective values:
.chart-box { grid-column: span 1;
grid-row: span 10;
}
.chart-box-wide {
grid-column: span 2;
}
.chart-box-tall {
grid-row: span 20;
}
We reload and have a look at the result:
Figure 3.24 – Awesome Analytics with a new grid layout
We see that all grid items now align perfectly.
We’ve seen the utility of subgrid, especially in combination with display: contents;. We’ve now practiced implicit grid areas and have learned how to reduce the number of grids on our page.
Finally, we can also arrange the chart box titles by adding the following CSS code to grid.css:
.chart-box { display: grid;
grid-template-rows: subgrid;
}
.chart-box header {
grid-row: span 1;
display: flex;
align-items: center;
}
.chart-box .chart-container {
grid-row: span 9;
}
.chart-box-tall .chart-container {
grid-row: span 19;
}
Since standard chart boxes span 10 rows and tall ones span 20 rows, the inner chart-container elements have to span 9 and 19 rows. This additional change allows us to further the idea of the vertical rhythm. We can see the result in the following figure:
Figure 3.25 – Awesome Analytics with vertically aligned titles
We can see that the titles now occupy at max a single row within the parent grid. We may also change this to two rows if we think that two-line titles look too crowded.
Summary
We’ve now learned about advanced grid features, as well as experimental ones. We learned about the row axis and column axis, how to influence their direction and orientation, and how to align and justify grid items and the entire grid along them. We learned about implicitly defined grid areas and how to build grids dynamically, and we learned about subgrids, the content display mode, and masonry layouts. We’ve practiced most of these with Awesome Analytics.
This knowledge and practice already renders us advanced CSS Grid users and allows us to build almost any grid layout that design experts may come up with.
In the next chapter, we’ll look at arguably one of the most essential topics of layouts on the web: how to define fully responsive grid layouts with the tools we already have and with the help of media queries. We’ll also look into best practices when designing grids for multiple viewports and devices.
