Why I'm excited about CSS Grid

I started learning CSS as a kid in the early ’00s, in the dark times of laying out content with tables. Today, in October 2017, we arrived at the situation where 70% of used browsers support CSS Grid, including the newest versions of all major desktop browsers.

CSS Grid support according to caniuse.com on 24 Oct 2017.

Here are 3 reasons why I am excited about CSS Grid.

1. Equal-height columns

With just those two rules, I can create three equal-height equal-width columns whose heights depends on their content.

1
2
3
4
main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
1
2
3
4
5
<main>
  <article id="article1">...</article>
  <article id="article2">...</article>
  <article id="article3">...</article>
</main>
Click image for the HTML file

No JavaScript, no hardcoded heights, no gradient backgrounds on main, no hacks.

2. Reordering of content with CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
main {
  display: grid;
  grid: "C D"
        "B A"
        "B E";
}

@media (min-width: 1000px) {
  main {
    grid: "A B C"
          "D B E";
  }
}

#article1 { grid-area: A; }
#article2 { grid-area: B; }
#article3 { grid-area: C; }
#article4 { grid-area: D; }
#article5 { grid-area: E; }
Click image for the HTML file

No JavaScript, no negative margins, no hacks.

3. Creative possibilities

The simplicity of defining a grid together with the power of it will allow everyone to spend more time coming up with creative designs and less time implementing those designs.

A-shaped layout. Click image for the HTML file.