icon-search
Grid Layout

Grid-based layout development III: CSS Grid Layout Module

Luis Belmonte Diaz 11.10.2016

After discussing what is a grid outside the internet world, we learned how Bootstrap grid works and used different approaches to implement a basic design with it. In this third article of the series, we are going to discuss the future of the grids: the currently Candidate Recommendation CSS Grid Layout Module.

CSS Grid Layout

Once CSS Grid Layout Module is part of CSS specification it will be the first time CSS provides front-end developers with a native tool to implement two-dimensional layouts (grids).

Someone could argue that CSS already has a native layout module, the Flexible Box Module. It actually allows two-dimensional layouting by nesting elements. So, still some hacking is needed, and still not a grid system.

CSS Grid browser support: mainly behind the flag

The CSS Grid Module is still a draft and this means that browser support is limited and irregular. It is supported in IE10/11 with old syntax. Edge supports the new syntax while Firefox, Opera and Chrome give support to the new syntax but enabling special flags. In other words, CSS Grid is here to test, but it’s not production ready yet.

CSS Grid Layout basic properties

Differently from Bootstrap where we are playing around with classes or mixins, in CSS Grid we count with a wide variety of properties to control the grid. We are not covering all these properties in depth but just the basic ones in order to build our basic layout:

Responsive Layout to be implemented using the CSS Grid Layout Module

First of all, we are going to use a slightly modified version of our markup. Until now we were working with Bootstrap and it had some specific needs to use its grid to which we are not forced anymore.

Our markup looks like this now:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <link rel="stylesheet" href="./styles/min/style.css">
        <title>CSS Grig Layout</title>
    </head>
    <body class="body">


<header class="header">
            This is the navigation
        </header>




<aside class="left-aside">
            This is an aside
        </aside>


        <main class="main">
            This is a section
        </main>


<aside class="right-aside">
            This is an aside
        </aside>




<footer class="footer">
            This is a footer
        </footer>


    </body>
</html>

It is very similar to the one we were using before. Similar to the clean one 🙂 without all the Bootstrap bloat. No tricks needed, just the markup.

And we start with our stylesheet.

Defining a container

.body {
  display: grid;
}

Defining grid areas

This step if not following the approach we are using, is not a must, but I found it very intuitive as we’ll see in the following sections. This previous step consists in naming the elements we are going to position in the grid.


.header {
  grid-area: header;
 }

.left-aside {
  grid-area: left-aside; 
}

.main {
  grid-area: main;
 }

.right-aside {
  grid-area: right-aside;
 }

.footer {
  grid-area: footer; 
}

Setting the rows and columns width

Here we go back to the grid container to specify how the columns and rows are going to behave. Those who has suffered implementing custom grids before will be aware of the gift we are given with this 😉

The properties to use here are grid-template-columns and grid-template-rows. With them, we set how many columns and rows our grid is going to have and which is going to be its width, height. To set them a list of space separated values can be supplied. The units to  used can be px, rem, em, % or fr (proportional grid unit) and can be mixed in one declaration.

We are using the mobile-first approach, so first we are going to define how the grid is going to work for smaller devices.

.body {
  display: grid;
  grid-template-columns: auto; // We don’t set a width, the 100% of the container
  grid-template-rows: 10rem 10rem 50rem 10rem 10rem; // Same height as we had before
}

Positioning elements

This is not the only way to do it, but it seems very intuitive at least for a basic introduction to the CSS Grid Layout Module as it is in itself a visual representation of the grid layout.

To position the grid areas we have declared before, we go back to the grid container and use the property grid-template-area. This property accepts a series of elements in quotation marks for each row of the grid. The elements accepted are: grid area names and a dot, which means that the cell will be empty or ‘none’.

When a grid area name is repeated, that item spans.

.body {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 10rem 10rem 50rem 10rem 10rem; 
  grid-template-areas: "header"
                       "left-aside"
                       "main"
                       "right-aside"
                       "footer";
}

As I said this last property gives us a visual representation of the grid layout. In this case a one-column and 5-rows layout.

Is this CSS Grid Layout responsive anyway?

Sure it is, we just have to define with media queries how we want it to behave.

Until now we have the mobile base layout and now we are going to implement the second step, for minimum width displays of 992px. For these widths, our layout displays its content in two columns and three rows.

.body {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 10rem 10rem 50rem 10rem 10rem; 
  grid-template-areas: "header"
                       "left-aside"
                       "main"
                       "right-aside"
                       "footer";

  @media (min-width: 992px) {
     grid-template-columns: 3fr 9fr;
     grid-template-rows: 10rem 50rem 10rem 10rem;
     grid-template-areas: ". header"
                          "left-aside main"
                          "right-aside right-aside"
                          ". footer";

  }
}

Note: The media-query is nested because this is written in Sass.

Some interesting things just happened here:

Setting the columns width

First of all, we are setting the columns width with the fr unit, a fraction of the free space in the row, setting the first column width to 3 and the second one to 9. Does it sound familiar? Yep, 9+3, that’s the 12 column count we were using previously in the Bootstrap implementations.

Positioning the elements in the grid

First row now looks like this “. header”. It means, the first 3-fr-width column is going to be empty, while the second one will contain the header grid-area.

What about the third row? In this one, the right-aside grid-area is repeated twice, what means that the right-aside will span both columns.

Last but not least, we implement the layout for the wider viewport sizes, up from 1200px.


.body {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 10rem 10rem 50rem 10rem 10rem; 
  grid-template-areas: "header"
                       "left-aside"
                       "main"
                       "right-aside"
                       "footer";

  @media (min-width: 992px) {
     grid-template-columns: 3fr 9fr;
     grid-template-rows: 10rem 50rem 10rem 10rem;
     grid-template-areas: ". header"
                          "left-aside main"
                          "right-aside right-aside"
                          ". footer";
  }

  @media (min-width: 1200px) {
      grid-template-columns: 2fr 8fr 2fr;
      grid-template-rows: 10rem 50rem 10rem;
      grid-template-areas: ". header ."
                           "left-aside main right-aside"
                           ". footer ."; 
 }
}

Nothing new here, you should be an expert in CSS Grid by now and understand the new code in our stylesheet. Don’t you? 🙂

Ok. So this is a good moment to focus our attention on something we haven’t talked about yet and it’s also a great future of this new CSS Module. Until now, having same height elements in a grid row needed some tricking with JavaScript, table-display or flex-box in a best case scenario. Actually, in the previous Bootstrap examples, the same height columns where so because their height was individually hardcoded in the stylesheet.

Same height columns with CSS Grid Layout

This is something that comes for free with this module and it’s great! Take our example, and see the second row for 992px and wider viewports. We have two different columns (left-aside and main) or even three (left-aside, main and right-aside). The height of this column was set in the grid-template-rows property to 50rem, but could equally be set to auto and all of them would grow to the height of the highest column.

What we learned in this tutorial

  • That CSS Grid Layout Module is a draft partially implemented to test by some browsers but not production ready
  • How CSS Grid allows us to write a semantic and clean html
  • What are the basic properties of the CSS Grid Layout Module
  • How to set a grid container
  • How to define the rows and columns of our grid
  • Which are the different units in which to set column width and row height
  • How to name our grid areas (element to position in our grid)
  • How to position the elements in the grid
  • How CSS Grid Layout solves same height column issue

comments: 0


Notice: Theme without comments.php is deprecated since version 3.0.0 with no alternative available. Please include a comments.php template in your theme. in /var/www/html/www_en/wp-includes/functions.php on line 3937

Leave a Reply

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