CSS Grid

Not too long ago, flexbox was heralded as the Next Big Thing in CSS. It was good for all kinds of layouts, but particularly vertical centering without a bunch of fuss. CSS Grid is like flexbox on steroids: instead of only being able to control your design easily either vertically or horizontally, now you can in both dimensions.

A word of warning before we dive into how to use grid — it currently doesn’t work with virtually any mobile browsers, with the exception of (surprisingly) IE Mobile. Fortunately, it has just now (March 2017) been adopted by both Chrome and Firefox for the desktop versions, though other browsers aren’t there yet.

Basic syntax

As with flexbox, you define your layout in terms of parent and child containers. For the parent, you use display: grid, inline-grid, and subgrid. There are also several other things you can optionally specify, such as grid-gap, grid-template-columns/rows, and grid-auto-rows/columns. Grid-auto-rows/columns specifies the size of a row or column that has not been explicitly defined elsewhere.

For each child, define grid-column-start, grid-column-end, grid-row-start, and grid-row-end values. You can use the following shorthand if you like:

.child {
grid-column: <start value> / <end value>;
grid-row: <start value> / <end value>;