Move over flex, CSS grid is (almost)here.

Well, CSS grid is not exactly supported till now but in about 2 months, stable versions of Chrome, Firefox and Opera will support Grid without flag(Chrome 57, Firefox 52 and Opera 43). It should not stop us from geeking about it and fantasizing how it can solve all of CSS layout problems in about five years when every browser will support it.

What is CSS Grid Layout

It is powerful new layout system to position content in two dimensional space. While using flexbox we position content in either rows or columns. Using Grid we can control both at same time. Let's see this with few examples

Example #1

Here in example we have one container and six children.
First to make a container use grid layout use display:grid. After that we divide our container into rows and columns using grid-template-columns and grid-template-rows properties. Both these properties accept multiple values.

grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr 80px;

The fr unit allows you to set the size of a container as a fraction of the free space of the grid container
So now we have a grid of 2 * 3 size with specified unit sizes. We can achieve same result using grid-template shorthand.

grid-template: 200px 1fr / 100px 1fr 80px

Next property we used is grid-gap which is shorthand for grid-row-gap and grid-column-gap to give space between content.

grid-gap: 10px 5px;

Example #2

Let's make more of a real world layout with header, navigation, main content and footer.

In real world scenarios we don't always need x*y layout. We may make one element take multiple grid cells using named areas(Like colspan and rowspan). we can name elements using grid-area property and in parent we can specify which element will take up which cell position using grid-template-area.

grid-template-areas: "nav head" "nav main" "foot foot";

Above property state that in first row we want navigation and header and in second row we want navigation and main content so navigation is taking two cell space.

Final words

Grid Layout is most powerful system but we should not use this in production environment just yet. We should be using flexbox which is still underused and not well understood. Hopefully all browsers will implement grid soon so that we can start shipping code with Grid.

What is CSS Grid Layout

Example #1

Example #2

Final words

Further reading #