Introduction

In the year 2009, after a long transition period separating us from the use of charts and the launch of style sheets, the period of “Flash and Silverlight” was about to finish. New ways to easily develop the web layouts with an engaging design had to be found. On the web, some new tools started to make their way, like the CSS Frameworks Blueprint CSS, Yui Grids and the renowned 960 Grid System (also called 960gs).

They all had brought to the WebDesign world the idea of “grid”, taken directly from the graphic design sector. We already know how the story goes on: with the arrival of the “responsive design”, new frameworks were created, like Bootstrap, Foundation, UI Kit, Skeleton, Pure.css and so on. They were provided with a fluid grid that can adapt itself to the display of the uncountable devices available on the market.

The necessity is clear: we need a flexible grid to design interfaces for the web.

The use of CSS Frameworks involves massive use of purely structural markup elements inserted in the HTML, that get the code “dirty”. Doesn’t it remind you of the system used to build the layout with the tables? The improper use of the tag “table” has been one of the many reasons that brought to the arrival of style sheets.
Grid Layout is born to address the problem of over-use of Framework, and this is the first time a CSS module is created only to manage the UI. Actually, none of the technologies present in the previous specifications were designed for the construction of web interfaces, all the solutions were designed by smart hacks and they can satisfy many different needs.

The property Float, for example, was born to insure that pictures can “float” inside text blocks, even if it has been used for years (and it is still used) to build layouts based on floating elements (float left or right) and related resets (clear left or right or both). Unfortunately, each browser understands the property differently. Furthermore, the use of the property overflow: hidden or of the smart class .clearfix was common to solve the bug of cropped backgrounds (https://complexspiral.com/publications/containing-floats/).

Then Flexbox arrives, and it brings some news and tools that can solve many of the problems related to the UI. Unfortunately, it has been designed to manage monodimensional structures: for two-dimensional ones, it is needed to use CSS Grid.

CSS Grid was presented at W3C in 2011 by Phil Cupp (here is the link to the first working draft: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/) . The goal of Cupp, at that time head of the UI team for the development of the new Microsoft“intune”, was to be able to bring into the CSS specification one of the most interesting modules of Silverlight: the Grid Layout.
Other developers have sent to W3C some Grid proposal before, but the one presented by Philip Cupp and his team was based on something already tested and functioning on Silverlight, it needs only to be adapted.
His specification, that has been implemented in IE 10 through the vendor prefix -ms-, has been revised, improved and re-written thanks to other developers’ contribution. You can find the video interview with CSS Grid creators at this link: https://channel9.msdn.com/Blogs/msedgedev/Creating-CSS-Grid.

One of the biggest advantages of using CSS Grid is the support for the realization of two-dimensional layouts, but also the possibility to make structural changes directly in the stylesheet, without necessarily upsetting the HTML markup.
Let’s go immediately to see the great potential of CSS Grid.

First steps

We will use the BEM methodology to name classes assigned to different elements and the Sass (SCSS) to write our CSS. We will use Firefox for the rendering since, at the moment, it is the only browser that permits to display the numeration assigned to rows, thanks to the tool “Inspect element”.

We will start with this sample code:

<div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
</div> 

.wrapper {
    background: #ddd;
    width: 900px;
    margin: auto;
}
  
.box {
    padding: 15px;
    outline: 1px solid #000;
}

In this case, we defined a div with a .wrapper class with nested boxes inside it. We want to get a template with 2 lines with a fixed height of 150px and 3 columns, each of them should be 300px wide.

In a Bootstrap type framework, we should have inserted structural elements as .row and .col-* to define the grid. With CSS Grid we only need to assign the property display: grid to the element with the .wrapper class:

.wrapper {
    background: #ddd;
    width: 900px;
    margin: auto;
    display: grid;
}

We will now define a 300px width for each column. We will use the property grid-template-columns to do that and, to have 3 columns, we should write the same value 3 times, as in the following example:

.wrapper {
    display: grid;
    grid-template-columns: 300px 300px 300px;
}

The line has a default height set on auto and it will automatically adapt to the content. If we want to decide a fixed value, we will use the property grid-template-rows:

.wrapper {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 300px 100px;
}

In this case, we decided an height of 300px for the first line and of 100px for the second line. We should again write the same value 2 times, to obtain 2 lines with the same height.

grid-template-rows: 150px 150px;

We can use the function repeat to avoid insert the same value many times. Following this formula we can define columns’ height and width:

repeat( [number of columns or lines], [height or width]);

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 300px);
    grid-template-rows: repeat(2, 150px);
}

If we set a fixed height for the first 2 lines, for any others in addition the height will be automatic:

Thanks to the below formula we can decide a width identical and repeated for first 2 columns (200px), the third column will be tighter (100px)

grid-template-columns: repeat(2, 200px) 100px;

If we want the last column to occupy all available space, the specification CSS Grid offers us a new relative unit of measurement: the fraction (fr).

Our formula will then change in:

grid-template-columns: repeat(2, 200px) 1fr;

where the last value (1fr) is relative and it adapts itself to the available space.

We can then use the same solution to insure that the width of all columns will adapt itself automatically to the width of the father container:

grid-template-columns: repeat(3, 1fr);

We can use the property grid-auto-rows, instead of grid-template-rows to set a fixed height for all lines, included those dynamically generated, as in the example below:

grid-auto-rows: 150px;

In this case, the numerical value should be defined only one time. This is the result:

The CSS code would be then:

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 150px;
}

We can use fractions on rows too, but we should define a fixed height for the element .wrapper:

.wrapper {
    height: 900px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}

In the next article, we will see how to realize our first layout with CSS Grid, and we will analyze the great potentialities of this approach.

See you next!