CSS Grid Layout 101

The new CSS Grid Layout specification purports to be the new standards for CSS layout. A brief introduction to this new specification, and it’s easy to understand all the hype that surrounds it. There is a lot of in-depth information available on how CSS Grid Layout works, and you can look here for a comprehensive guide. For now, I will provide a brief overview and explanation of my personal favourite features of CSS Grid Layout in order to demonstrate the game-changing nature of this brand-new, two-dimensional grid based layout system.

The CSS Grid Layout tool can layout items in specified rows and columns, and can divide a page into regions. This is a major way in which CSS Grid Layout differs from Flexbox Layout. While Flexbox is single-axis oriented (Figure 1), Grid Layout is useful for two-dimensional layouts where alignment of content is desired in both dimensions (Figure 2).

Figure 1: Flexbox Layout (https://www.w3.org/TR/css3-grid-layout/)
Figure 1: Grid Layout (https://www.w3.org/TR/css3-grid-layout/)

In CSS Grid Layout, grid structures are described in CSS and not HTML. This allows for transformations in visual layout structure without requiring corresponding markup changes, which enables developers to easily modify, change or adapt their layout. This is best shown by an explanation and example of code for CSS Grid Layout.


The first step is to define the grid container. This is the parent element on which display: grid is applied. This element is the direct parent of all the grid items. In this example, container is the grid container, and the item elements are the grid items, the children of the grid container.

HTML:

<div class=”container”>

<div class=”item-1"></div>

<div class=”item-2"></div>

<div class=”item-3"></div>

</div>

CSS:

.container {

display: grid;

}

In Grid Layout, one way to define columns and rows (and the easiest, in my opinion) is with a space-separated list of values. This is accomplished using the grid-template-columns and grid-template-rows properties. The value represents the grid track size, and the space between them represents the grid lines. In the example below, I have specified three columns with a track size of 120px, and three rows with a track size of 50px.

CSS:

.container {

display: grid;

grid-template-columns: 120px 120px 120px;

grid-template-rows: 50px 50px 50px.

}

The next step would be to take the elements in our markup, and assign them to a grid area, using the grid-area property.

.item-1 {

grid-area: sidebar

}

.item-2 {

grid-area: header;

}

.item-3 {

grid-area: content

}

.item-4 {

grid-area: footer;

}

We then use the grid-template-areas property on our grid container to describe where on the grid the elements will sit. The name of a grid area has been specified by the values placed in the grid-area property.

.container {

display: grid;

grid-template-columns: 120px 120px 120px;

grid-template-rows: 50px 50px 50px;

grid-template-areas:

“… header header”

“content content sidebar”

“footer footer footer”

}

Repeating the name of a grid area causes the content to span those cells, and a period signifies an empty cell. This will result in a grid layout that looks like this:

Therefore, the syntax itself provides a visualization of the grid structure. With each element having it’s own specified area on the grid, things are not at risk of overlapping due to a change in text size, more content than expected, or smaller viewports, for example. Additional content sections can easily be added without the risk of having sections unintentionally overlap or disrupting the larger layout, since each element has it’s own assigned grid track and cannot cross over into another. However, a grid container’s child elements could position themselves so they actually do overlap and layer, similar to CSS positioned elements. This makes it easy to experiment with new layouts without having to change anything other than the CSS.

In conclusion, CSS Grid Layout is a new tool that gives developers more control over the layout. It eliminates the need to use floats and clears, and allows developers to control both columns and rows simultaneously. The ability to see in the code a visualization of the structure of the grid is my personal favourite feature, as it is a simple and helpful tool for creating larger-scale, complicated or asymmetrical layouts.