CSS Front-end Responsive10 augustus 2016

Perhaps you’ve already heard about it and perhaps not, but it is coming our way: the CSS Grid Layout. A complete layout system that is simply a part of CSS.

Any website nowadays should be responsive. Creating this responsiveness is tricky and therefor lots of developers use existing CSS frameworks like Bootstrap. The diehards among us write a framework as such on their own but this is very time consuming. Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around in the past.

What is CSS Grid Layout?

Grid Layout controls the layout of html elements using a 2-dimensional grid. The grid rows and columns can be custom made in any size and quantity. By using display:grid on a html element, its child elements can be placed as grid items in the rows and columns on this grid.

An important thing to know is that CSS Grid Layout is not yet supported in any browser. It can be played with by enabling a certain flag in your browser. For example, in chrome the flag ‘experimental web platform tools’ can be enabled at chrome://flags.

Basic usage

Let’s dive into the basics of CSS Grid Layout by using this example which has a container and 5 common used html elements.

<div class="container">
  <div class="item header">header</div>
  <div class="item menu">menu</div>
  <div class="item content">content</div>
  <div class="item sidebar">sidebar</div>
  <div class="item footer">footer</div>

First the container is given the following css properties:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 80% 20%;
  grid-template-rows: auto 1fr auto;

What this does is very simple: It creates rows and columns with the given values. The values for grid-template-column define the width of the columns and the values for the grid-template-rows define the height of the rows. Nice new feature is the flex fraction or ‘fr’. The value 1fr basically means that the height or width stretches and fills up the space.css grid layout example of the grid columns and row

The property display:grid now automatically places the child elements on the grid. This is were it gets interesting because we can now tell each element were we want it to be positioned. To do this the following properties are used which work like coördinates on the grid:

.item {
  grid-column: <value>
  grid-row: <value>

However, it is also possible to spread an element over multiple cells. This example will spread the element across the first two cells on the third row:

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 3;

To see these examples in action, visit this codepen (make sure you have the correct flag enabled).

Using grid areas

A slightly different approach would be to use grid areas. Instead of placing the child elements on the grid by defining their coördinates, they are assigned to a ‘grid area’ and then used in a matrix:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header header header menu"
                         "content content content content"
                         "footer footer footer footer"

This gives the following layout:css grid layout with grid-area

The position of the elements corresponds with the grid-template-areas matrix. This is a smart feature because this makes it very easy to play around with the layout and the placement of elements. Check out a working demo at the following codepen.

What next?

Is CSS Grid Layout worth looking into right now? Definitely! Though it has a lot of features, getting an idea of the basics is very easy and its good to be prepared for a feature that will change the way we layout our websites in the very near future. To learn more about CSS Grid Layout it might be useful to check out these links which were also a great resource for this blogpost:

https://css-tricks.com/snippets/css/complete-guide-grid/ – has a detailed overview of all the features

http://gridbyexample.com/ – lots of examples

https://www.w3.org/TR/css-grid-1/ – official documentation