What is Grid Layout?

CSS Grid Layout is a two-dimensional grid system. It is a CSS language mechanism created to place and distribute elements on a page, which is one of the most problematic processes in CSS. It is a standard, which means that you don't need anything special for the browser to be able to understand it. There are no limits to using it: wherever you can develop your CSS to define the style, you can use Grid Layout to apply a grid.

Getting Started

To get started you have to define a container element as a grid with display: grid, but before you do that, it is important to be familiar with certain concepts:

• Grid container: The parent of all the grid items, it is the element on which display: grid is applied.

• Item: Each child contained in the grid.

• Grid line: Horizontal or vertical grid cell separator.

• Grid cell: Minimum unit of the grid.

• Grid track: Horizontal or vertical band of grid cells.

• Grid area: Set of grid cells.

The Basics

There are four basic Grid properties you need to know, in order to make use of it easily and simply: display, columns and rows, fr unit, and gap. Let’s take a look at each of them to understand their role.

Display

This value defines how the grid will be positioned with the content. There are two possible values:

The inline-grid value positions it inline, to the left or to the right of the content, and the grid value positions the grid in block, either above or below the content.

Columns and Rows

These properties are used to create the grid by sizing the rows and columns.

In this example, the grid defined will have two columns. The first will have a size of 200px and the second one will measure 100px; both will have a row size of 50px.

Fr unit

Grid has a special unit of dimension, fr (like pixels or percentages) which represents a fraction of the remaining space in the grid. Instead of using pixels in the example, let’s use fr.

Now, the two columns will occupy all the available space, with the first one occupying double the amount of the second.

Gap

Sometimes, columns and/or rows need to have a gap between them. The column-gap and row-gap properties can be used, or simply condensed into gap, as shown below.

Generators

Sometimes, when there are many elements that have to be positioned inside the page, it can be difficult to visualize what they will look like or the best way to do it. That is where generators come in handy. There are lots of tools available, but here is a selection of three useful grid generators (in no particular order):

CSS Grid Generator

This generator is an open source project that is very easy to use – perfect for beginners who are learning how to use Grid.  With CSS Grid Generator, just specify the number of rows, columns, and gaps across rows and columns, and it will provide the proper CSS class ready to copy to your clipboard.

LayoutIt

Like the previous one, LayoutIt is also an open source project. Things to note about this generator are that it allows code to be exported in CodePen and allows for the resizing columns and rows using percentages (%), fractionals (fr), and pixels (px).

Griddy

From the information available in many articles, Griddy seems to be the generator that is most valued and used by developers, in general. Like the previous tool, it allows different resizing units to be used but is a little more difficult to use than CSS Grid Generator and LayoutIt.

Grid vs Flex

The main difference between Flex and Grid is that Flex uses one dimension, while Grid uses two dimensions. This means that with Flex, the positioning of the elements can be defined on either the horizontal or the vertical axis. Grid, on the other hand, allows the ability to work in two dimensions, meaning it is possible to position the cell both vertically and horizontally.

Highlights of Flex

• Best choice for aligning the content between elements.
• Positioning elements horizontally or vertically.
• Good at positioning the smallest details of a layout.

Highlights of Grid

• Responsive, easier to implement.
• Compatible with all modern browsers.
• Positioning elements in two dimensions.

Does this mean that Grid is better than Flex?

Nope! Both are good tools, but one will usually be more suitable than the other, depending on the situation. In any case, it is best to learn how to use both and combine them. Now, you have a guide to using Grid, so go ahead and get started!