CSS Grid is Awesome!

I came across this CSS Grid Changes EVERYTHING presentation from Morten Rand-Hendriksen on WorldCamp Europe, Paris, 2017:

Wow! This is awesome! Over a decade ago I kind of got disconnected from the whole frontend development. All this juggling with div’s in div’s, Javascript JQuery/Bootstrap/Angular magic, mysterious CSS features… it was just too much to keep track of.

But now!! This CSS Grid I understand again. With CSS Grid it’s easy to create a responsive website with readable HTML code. This inspired me to use pure CSS for my new Jekyll blog.

<html>
  <head>
    <!-- some css styles -->
  </head>
  <body>
    <grid>
      <header>
        <!-- header image and menu -->
      </header>
      <content>
        <!-- page content in here -->
      </content>
      <footer>
        <!-- footer image and copyright -->
      </footer>
    </grid>
  </body>
</html>

Nowadays you can define your own elements, so why not use it to make it easier to understand.

grid {
  display: grid;
}

The most awesome feature of CSS Grid is areas. This makes it dead easier to create a responsive site.
By default, start with designing for mobile; everything in a single column;

grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "footer";
}

header {
  grid-area: header;
}
content {
  grid-area: content;
}
sidebar {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}

The sidebar element is positioned in an area which is currently not part of the template, so this is just not displayed. No need to use display: none.

When styling the page for larger screens, just apply a media query to turn the grid into a multi column grid.

@media only screen and (min-width: 960px) {
  grid {
    grid-template-columns: auto 710px 250px auto;
    grid-template-areas:
      ". header header ."
      ". content sidebar ."
      ". footer footer .";
  }
}

So for devices with a screen > 960px, the grid is now 4 columns and 3 rows. This first and last column have an auto size, the middle columns a fixed size. You can also use ‘fr’ or ‘%’ values.
Both the header and footer are in both middle columns. The content is in the 2nd column and sidebar in the 3rd column.

This is just the tip of the iceberg. CSS Grid has so many features: gabs between rows and columns, direct addressing of rows and columns, overlapping components over multiple rows or columns, etc.