CSS Grid Layout Module

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Browser Support

Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some Grid Layout code in Firefox, it should work in the same way in Chrome. This is no longer an experimental specification, and you are safe to use it in production.

Grid Elements

A grid layout consists of a parent element, with one or more child elements.

Display Property

We create a grid container by declaring display: grid; or display: inline-grid; on an element. As soon as we do this, all direct children of that element become grid items.

.grid-container {
display: grid;
display: inline-grid;
}

Grid Columns

A grid column is a vertical track in a CSS Grid Layout, and is the space between two vertical grid lines. It is defined by the grid-template-columns property or in the shorthand grid or grid-template properties.

In addition, columns may be created in the implicit grid when items are placed outside of columns created in the explicit grid. These columns will be auto-sized by default, or can have a size specified with the grid-auto-columns property. When working with alignment in CSS Grid Layout, the axis down which columns run is known as the block, or column, axis.

Grid Rows

A grid row is a horizontal track in a CSS Grid Layout, that is the space between two horizontal grid lines. It is defined by the grid-template-rows property or in the shorthand grid or grid-template properties.

In addition, rows may be created in the implicit grid when items are placed outside of rows created in the explicit grid. These rows will be auto sized by default, or can have a size specified with the grid-auto-rows property. When working with alignment in CSS Grid Layout, the axis along which rows run is known as the inline, or row, axis.

Grid Gaps

The spaces between each column or row are called gaps. Instead of creating empty grid tracks or trying to hack things up with margins, grid-gap is a property available on grid containers that makes it easy to create gutters in your CSS Grid layouts.

You can adjust the gap size by using one of the following properties:

grid-column-gap
grid-row-gap
grid-gap

The grid-column-gap property sets the gap between the columns:

.grid-container {
display: grid;
grid-column-gap: 50px;
}

The grid-row-gap property sets the gap between the rows:

.grid-container {
display: grid;
grid-column-gap: 50px;
}

The grid-gap property is a shorthand property for the grid-column-gap and the grid-row-gap properties:

.grid-container {
display: grid;
grid-gap: 50px 100px;
}

The grid-gap property can also be used to set both the row gap and the column gap in one value:

.grid-container {
display: grid;
grid-gap: 50px;
}

Grid Lines

We now move on from creating a grid, to placing things on the grid. Our grid always has lines, which lines start at 1 and relate to the Writing Mode of the document. Therefore in English, column line 1 is on the left hand side of the grid and row line 1 at the top. In Arabic column line 1 would be on the right hand side, as Arabic is written right to left.

We can place things according to these lines by specifying the start and end line. We do this using the following properties:

grid-column-start
grid-column-end
grid-row-start
grid-row-end

These properties can all have a line number as the value. You can also use the shorthand properties:

grid-column
grid-row

These let you specify the start and end lines at once, separated by a / — a forward slash character.

Download this file as a starting point or see it live here. It has a grid defined already, and a simple article outlined. You can see that auto-placement is placing items one into each cell of the grid that we have created.

We will instead place all of the elements for our site on the grid, using the grid lines. Add the following rules to the bottom of your CSS:

header {
grid-column: 1 / 3;
grid-row: 1;
}

article {
grid-column: 2;
grid-row: 2;
}

aside {
grid-column: 1;
grid-row: 2;
}

footer {
grid-column: 1 / 3;
grid-row: 3;
}

CSS GRID