The new CSS Grid will change the way you think about layouts. Here's why.
Tags: css, design, cssgrid
Published: 2020-01-23 18:53:29

---
title: The new CSS Grid will change the way you think about layouts. Here's why.
published: true
description: What do subgrids from CSS and keylines from Material Design have in common?
canonical_url: https://lukaszmakuch.pl/post/new-css-grid
cover_image: https://thepracticaldev.s3.amazonaws.com/i/imbo86339vltpndkq1z2.png
tags:
 - css
 - design
 - css-grid
---


The first CSS Grid Layout made it possible to divide the area of an element with horizontal and vertical lines. These lines dictated the size and position of its children.

But this is going to change.

To understand why, and most importantly, how, let's recap the way things worked in the first version of the grid.

For instance, this card could be one grid:

![The first card](https://thepracticaldev.s3.amazonaws.com/i/kp8t7koyp64a9uehpqmc.png)



The HTML code looks simple. It's just one parent with two children:
```html
<div class="card">
  <img class="avatar" src="https://picsum.photos/id/10/200/200"/>
  <h2 class="card__text">Lorem Ipsum</h2>
</div>
```

The CSS code makes the parent element a grid:
```css
.card {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 10px;
  align-items: center;
}
```

The grid lines are as follows:

![The first card's grid](https://thepracticaldev.s3.amazonaws.com/i/uhv7gscjgim7auhsbo89.png)

Another card could be another isolated grid:

![The second card's grid](https://thepracticaldev.s3.amazonaws.com/i/qhjdkjt9q0tqqngiq3pw.png)

And the header could be yet another grid, built in the same way:

![The header's grid](https://thepracticaldev.s3.amazonaws.com/i/z3ghloko9sia40v6p43v.png)

Let's put the previously discussed components together, just like that:

![The current grid, all cards with the same data](https://thepracticaldev.s3.amazonaws.com/i/jndwln8jt1evu3z2hxra.png)

The parent element is yet another grid, just to define the spacing among the cards and the header:
```css
.grid {
  display: grid;
  grid-gap: 20px;
}
```

It doesn't look bad.

However, it's quite optimistic to assume that in real life all the cards will have identical content. So let's make it a bit more realistic:

![The current grid, real-life data](https://thepracticaldev.s3.amazonaws.com/i/f31jk5lsymc2v0b9p8jh.png)

That's the problem I wanted to show you. As we can see, the texts are not really aligned with each other:

![The current grid, real-life data, with a keyline](https://thepracticaldev.s3.amazonaws.com/i/umj0y5qka998tqnlz9rq.png)

Luckily for us, the new CSS Grid Layout provides an elegant solution to this ugly problem!

We can define a single grid line that will be used to divide all the cards and the header together, on a higher level, above the individual elements:

![The new CSS grid, grid vizualisation](https://thepracticaldev.s3.amazonaws.com/i/7csm29rwok004tku6t88.png)

First, let's define one grid at the parent's level instead of defining multiple grids for each child:
```css
.grid {
  display: grid;
  grid-template-columns: max-content 1fr;
}
```

Then it's enough that we use the new `subgrid` option. It means that both the `.header` and the `.card` elements don't define their own grid lines, but instead, they inherit them from their parent element:
```css
.header {
  /* 1 / -1 to make it span across the whole container. */
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.card {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
```
And... that'd be it!

![The new CSS grid](https://thepracticaldev.s3.amazonaws.com/i/imbo86339vltpndkq1z2.png)

[The complete code of this example may be found on CodePen.](https://codepen.io/lukaszmakuch/pen/ZEYjxWZ)

Subgrids from CSS Grid Level 2 enabled us to define cross-component alignment rules that work well even for dynamic content.

Just to be fair, I got to say that designers have been talking about it for ages! Maybe they called it differently, like [keylines in Material Design](https://material.io/design/layout/spacing-methods.html#spacing), but anyway, it's nothing new to them!

So is the new specification a spacing nirvana? Not yet. By looking at some ongoing discussions about [possible extensions of the subgrid](https://github.com/w3c/csswg-drafts/issues/2530) we can tell that there's still some room for improvement. But it's already a big step towards unifying the ways designers and developers think. __Now when somebody says "We need to align these components to this line." we can actually code "this line".__