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.

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
<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

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.