CSS Grid – Table layout is back. Be there and be square.

Over the past few years, CSS Flexbox has become widely used and browser support is looking really good (unless you are one of the poor souls that have to support IE9 and below). Flexbox made a lot of complex layout tasks easier, like equi-distant spacing between elements, top-to-bottom layouts or the holy grail of CSS wizardry: vertical centering.

Thank you for reading this post, don't forget to subscribe!

There's no way to align elements across multiple flexbox containers.

But alas, screens commonly have a second dimension we need to worry about. Short of taking care of sizing the elements yourself, sadly, you can’t have both a vertical and horizontal rhythm by just using flexbox alone. This is where CSS Grid comes to the rescue.

CSS Grid has been in development, behind a flag in most browsers for over 5 years and extra time has been spent on interoperability to avoid a buggy launch like Flexbox had. So if you use Grid to implement your layout in Chrome, chances are you’ll get the same result in Firefox and Safari. At the time of writing, Microsoft’s Edge implementation of Grid is out of date (the same as was already present in IE11.) and the update is “under consideration“.

Despite the similarities in concept and syntax, don’t think of Flexbox and Grid as competing layout techniques. Grid arranges in two dimensions, while Flexbox lays out in one. There is synergy when using the two together.

Defining a grid

To get familiar with the individual properties of Grid I heartily recommend Rachel Andrew’s Grid By Example or CSS Tricks’ Cheat Sheet. If you are familiar with Flexbox, a lot of the properties and their meaning should be familiar.

Let’s take a look at a standard 12-column grid layout. The classic 12-column layout is popular as the number 12 is divisible by 2, 3, 4 and 6, and is therefore useful for many designs. Let’s implement this layout:

Let’s start with our markup code:

<!DOCTYPE html>
<body>
  <header></header>
  <nav></nav>
  <main></main>
  <footer></footer>
</body>

In our stylesheet we start by expanding our body so it covers the entire viewport and turning it into a grid container:

html, body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;s
  padding: 0;
}
body {
  display: grid;
}

Now we are using CSS Grid. Hooray!

The next step is to implement the rows and columns of our grid. We could implement all 12 columns in our mockup, but as we are not using every column, doing this would make our CSS unnecessarily messy. For the sake of simplicity, we’ll implement the layout this way:

The header and the footer are variable in width and the content is variable in both dimensions. The nav will be variable in both dimensions as well, but we are going to impose a minimum width of 200px on it. (Why? To show off the features of CSS Grid, of course.)

In CSS Grid, the set of columns and rows are called tracks. Let’s start with defining our first set of tracks, the rows:

Read Full Article

Leave a Reply

Your email address will not be published. Required fields are marked *