CSS Grid Layout. Quick Start


Hi everyone! February-March 2017 has been remarkable for all those, working with HTML and CSS, owing to a number of updates, including the one for CSS. Now, the CSS Grid Layout can be used without the flags in the following browsers: Firefox 52, Chrome 57, Opera 44, Safari 10.1. One of the browsers has been left behind and I guess you've already noticed which one. For now it supports only the old grid layout version, yet the developers do their best to make it possible to integrate into the browser a new specification. The CSS Grid Layout integration has become one of the most significant events in the last five years that completely changes the way how user interfaces are created. That's really cool.

I use the Flexible Box Layout

A lot of people ask the question: "Hey, I'm using the flexbox, what's the point of using grids?" This is a live issue since by no means CSS Grid can substitute for Flexbox and vice versa. The first distinction is that Flexbox works only in one dimension, meaning that all flex elements can be laid either along the main axis or crossed axis. CSS Grid supports a two-dimensional layout, allowing the contents arrangement in both dimensions. I like how Tab Atkins explains the difference between the two.

The biggest problem developers encounter with when creating user interfaces is that once any of its parts needs changing, like for example, design, functionality or behavior of any block, the layout ought to be changed too (in most cases). Now, with CSS Grid, it's become possible to change the arrangement of the grid elements without editing HTML. Take a look at the example of the layout on Flexbox and CSS Grid.

Basic Terms and Definitions

Basic Terms and Definitions

Before you start to work with CSS Grid, let's learn some basic terms and definitions that the layout is based on.

Grid container is a system of intersecting horizontal and vertical grid lines that divide the space inside the container into the grid areas where grid elements can be placed. Grid container uses two types of lines: one of them defines the column axis and the other one defines the row axis.

Grid lines are horizontal and vertical dividing lines that exist on either side of a column or row and determine the structure of a future-to-be grid container. These lines can be referred to either by the numerical values or the names given by an author. The grid line numbers always start from one. Keep in mind, the grid lines are very sensitive to the writing mode used by your project. So, if you use the Arabic language with a right-to-left writing direction, the numbers of lines will be displayed in the right-to-left writing direction too.

Grid track is the space between two adjacent lines, vertical or horizontal.

Grid cell is the space between adjacent grid row and grid columns. This is the smallest unit of the grid container to refer to when laying grid elements.

Grid area is the space inside grid container where one can position one or more grid elements. The grid area can contain one or more grid cells.

All of the elements are important and closely linked to one another with each being responsible for a certain part of grid container.

The First CSS Grid Layout

Now, when we've learnt the concepts of grid and explained some of its main terminology, let's create our first grid layout. It will be a simple layout with three adjacent columns and rows but you will understand the idea. You can find the example below.

In the first case we create three columns and three rows of the size of 150px 1fr 150px and 50px auto 50px accordingly. Let's see what the variables 1fr and auto mean.

1fr - is a special unit implemented in CSS Grid Layout. It's not measured in any of the existing units (px, em, rem, etc.)and therefore, cannot be used for the calc() function. The 1fr cannot be smaller than one, nor can it have negative values. The 1fr can be computed only after all other values have been calculated.

auto - is a unique unit that uses its own calculating algorithm. In many situations it acts almost similar to the fr unit, yet, it's not the same. The main difference between the two is that the auto is computed first. You should remember this. Check the second and the third examples from the link above.

Here are the rules used for dividing the layouts into the columns and rows:

  grid-template-columns: 150px 1fr auto;
grid-template-rows: 50px auto 50px;

The short version will look this way:

  grid-template: 50px auto 50px / 150px 1fr auto;

A Typical Layout Built On Grids

Let's make a simple layout that we all have seen many times. It will contain the following tags: header, nav, aside, article and footer. These are the elements most websites contain. Up to now, creating even such a simple layout has entailed the following problem "I am a designer, I want it this way. I am a developer, this isn't possible to do". With CSS Grid Layout, this shouldn't be a case anymore.

In the given example we'll learn some more interesting properties of CSS Grid Layout. The first one, grid-template-areas, is used for naming grid areas inside grid container which aren't interlinked with grid elements. The syntax is very convenient and allows you to see the end layout. The second property, grid-area, is used for the children items of grid container and shows to which of the named areas a grid element is to be placed.

Let's take a look at the first example grid-template-areas:

  grid-template-areas: "header header"
                     "nav  main"
                     "footer ."

One or more sequent dots (.) have a special meaning. If these characters are used, the browser will take it as a null cell token and won't create a named area for grid elements inside a grid container.

In case the property grid-area hasn't been specified to the children items of grid container, the browser will sort them out automatically. You can see how it works from the last example following the link given above.

Useful Links

  1. CSS Grid Layout Module Level 1
  2. How to create a simple layout with CSS Grid Layouts
  3. Grid by Example by Rachel Andrew
  4. Useful resources to learn CSS Grid Layout by Jen Simmons
  5. A resource for learning СSS Grid Layout by Mozilla
  6. Jen Simmons talks about СSS Grid Layout
  7. My own resources collection for learning СSS Grid Layout

In Conclusion

In this article we've looked only into the tip of the iceberg of the CSS Grid Layout capabilities. I've taken notice of the CSS Grid Layout long before the updates, when it was enabled with the flags, and can't believe how huge the progress's been done since then. This is a real breakthrough of all standards! And I like it a lot.

I do recommend you to take a look at the CSS Grid layout and spend a little bit of time learning how to use it. Believe me, it will come useful in many different projects regardless whether you create in React, Angular, Vue (add yours). Grids have come to stay for a long time.

In the end I'd like to give you one more example of how a grid element is used in random named areas.

This is all for now. Thanks for your attention and special thanks to all those who have read the article to the end.

If this article was useful to you, feel free to add likes and follow me on Twitter or GitHub where I often share other interesting ideas with my followers.