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.

A screenshot of CSS Grid support on caniuse.com
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>
A three column grid layout
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; }
A gif of a two row three column grid layout changing order on window resolution change
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 screenshot of a website with CSS grid that forms the content to look like the letter A
A-shaped layout. Click image for the HTML file.