On the Grid, part 3

Let's wrap up this series on CSS Grid by covering a few topics that will help you make the most of your layouts.

Out of Order

In traditional flow layout, each element in your HTML source is rendered in order, from the beginning of your file to the end. When the browser fills a grid with grid items, it follows this rule also. But as we discussed last time, we can take control of where items are placed on the grid, so we can actually break the source order rule for our own effects.

Why would we do this? Mainly, it allows us to structure our source intelligibly while giving us the power to emphasize more important information through layout. But it also ties into a web design concept called progressive enhancement. This is the idea that you should design your page so it works for the simplest platform and build up from there as more advanced features become available.

Consider that some users may be visiting your page with browsers that don't support CSS Grid. Admittedly, this is very unlikely. At the time of writing, Grid has global browser support of around 94%. But the same idea holds true for features that are not as widespread. For such users, you want to make sure that your information makes sense without relying on the layout tricks of your grid. But for everyone else, you can use intentional position to provide an improved experience.

It's critical that your source order make sense, however. Even in browsers that support Grid, accessibility features use the source order to present your page to visitors using screen readers and other assistive technologies.

Overlapping

Since we can intentionally position grid items wherever we want, there's nothing that says we have to put each one in a different cell. Grid items can overlap, just likes positioned items in flow layout.

If two items are assigned to the same grid track, they will overlap, with the item appearing later in the source order being rendered above the earlier item. So, the following code...

<div class="grid-3x3">
<div class="full-grid">This takes up the full grid.</div>
<div class="bottom-middle">This overlaps.</div>
</div>

.grid-3x3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.full-grid {
    background-color: pink;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
.bottom-middle {
    background-color: lime;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

...renders like this:

Gaps and Gutters

Until now, our grid tracks ran right up against one another, with no space between. But what if we want to let our grid items breathe a bit? That's where the gap property comes in.

When you define the gap property on a grid container, the browser will put space between each track equal to the value. Imagine that it's making the invisible lines between each track thicker. (Though it doesn't change the lines on the very edges of the grid container.) The size of these gaps is taken into account when figuring out the size of flexible grid tracks (those with fr units).

.grid-gaps {
    display: grid;
    grid-template-columns: 4em 1fr 1fr;
    gap: 1em;
}
.grid-item {
    background-color: pink;
    padding: 1ch;
}

<div class="grid-gaps">
<div class="grid-item">Fixed width</div>
<div class="grid-item">Half the remainder</div>
<div class="grid-item">Half the remainder</div>
</div>

Aligning Items

By default, grid items stretch to take up the full grid track. But it doesn't have to be this way. You can align grid items along two axes of the grid container: the block axis, which is the direction that block items are placed in normal flow layout; and the inline axis, which is the direction text flows within a block. To differentiate, CSS uses the align-* properties to place items along the block axis and the justify-* properties to place them along the inline axis.

You can either set your alignment properties on the grid container, using align-items and justify-items, or on each grid item, using align-self and justify-self. Each takes the same list of value keywords, including the default stretch, start, end, center, and more. When you change the alignment value for a container or an individual item, the grid item no longer stretches, instead sizing along that axis to whatever its normal value would be based on its content.

Let's see what a few of these alternate values look like along each axis, using align-self and justify-self. Remember that align-items and justify-items will make every grid item in the container use the same placement.

Conclusion

There you have it. I know it's been a lot to take in, but CSS Grid is a really powerful tool for making effective layouts on the web. I hope you play around with it, and I'd love to see what you come up with!