Reading Time: 7 minutes

At the beginning of the 2017 year, we could see the introduction of new display property, display: grid, which introduces two-dimensional grid-based layout system. It has been designed for complicated layouts, where eg. Flexbox with its one-dimensional layout system needs more attention and time to solve problems. In brief, grid consists of the creation of columns, rows, cells, and areas, creating very powerful „matrix like” layout system. Properties of rows, columns which consists of cells are assigned to parent container (wrapper). Grid items are areas, which covers grid cells, are assigned to wrapper children. Let’s see a basic example.

Display: grid

Basic grid
To create basic layout, using new possibilities of display grid, we need to assign to container of grid-items  display: grid (for block-level grid) | inline-grid (for inline-level grid) | subgrid (assign to grid-item, which is also grid container, because display: grid has an impact only to first-level children). Next, we should add grid-template-columns and grid-template-columns properties to this container, which are responsible for a width of each column and height of each row.

Let’s jump to some code snippet, to see how it works:

If you want to add some space between grid elements there is a possibility to add a grid-gap property to wrapper container, which has value:

  • Grid-gap: [grid-row-gap]  [grid-column-gap]
    • grid-row-gap, grid-column-gap – value in px, the width of space between

Life code example:

The width of columns is specified by „grid-template-columns” property and rows height are specified by „grid-template-rows”. Moreover, we can add a name of lines between grid items, add lines before after last grid elements, to make a preparation of grid items areas much easiest.

If we don’t set names to each line it will be assigned automatically, starting at 1

We can add more than one name to a single line to make navigation between grid cells easier.

Fr units
Fr units is another smart solution for setting grid-template-columns and rows, it sets the size of row/column based on a fraction of available space. Example below set each wrapper column width to 25%

In example below we will combine 1fr 2fr 3fr 4fr, it will set width in pattern; 1000px of width, whole space available  for fr (there isn’t any no flex values) will be divided by (1 + 2 + 3 + 4 = 10) so for example 1fr will occupy 100px, 2fr = 200px in this case, 3fr will be set as 300px and finally 4fr will be 400px. See code snippet below:

Moreover, you can combine Fr units with no flexible values e.g. px. In next example the width of FR columns will be calculated as ( 100% – 20px ) / 3

Also, you can combine %, fr, px:

DRY columns and rows implementation

According to Don’t repeat yourself rule, grid-template-columns and grid-template-rows values can be assigned as repeat() rule. This is really helpful if we need to design repetitive width or height of matrix rows and columns for our layout;  

repeat(4, 25%, [col-start]),

Where: 4 – amount of loops, 25% – width/height, [col-start] – name of line between grid items.


Designing an area – area that covers several grid cells

Another cool this is creation idea of areas using Grid-templates-area which specify ranges of each section. To set it up we need to create a grid-template-areas property which value consists of rows, where we store names of areas. It is important to set the same amount of words on each row otherwise, the error will be thrown. It is similar to setting colspan and rowspan to table cells.

To assign an item to the area just simply, put grid-area, as the property of grid-item, with a value equal to the grid-template-areas name of the section, eg:

As a result, we got the header, covers first grid row.


If in any row of grid-template-areas you can find dot, that means that the corresponded grid cell will be omitted and stay empty.

Make your code shorter

There is shorthand for grid-template-columns, grid-template-rows and grid-template-areas;

Grid template, just create sections for each row, as has been shown in pattern below:

[row-start-name] row_height „name_for_grid_template [row-end-name]

[row-start-name] row_height „name_for_grid_template [row-end-name]

/ parametrs_for_columns


Which is the same as:

Align grid items content horizontally and vertically.

To align items in each cell horizontal we can use a justify-items property to our wrapper container, where we got several values possible: start, end, center, stretch, which works similar to flex-box.

  • Start – aligns content to the left side of grid area

  • End – aligns content to right side of grid area

  • Center – aligns content to center of grid area

  • Stretch – fulfill whole width of grid area (default value)

To align items in each cell vertically we can use: justify-items, which accepts same arguments as justify-items, but align content vertically to the grid area:

  • Start – aligns content to the left side of grid area

  • End – aligns content to right side of grid area

  • Center – aligns content to center of grid area

  • Stretch – fulfill the whole width of grid area (default value)

Some common front-end task is to set items vertically and horizontally on center. We got several ways to solve this problem, display grid, gives us simple solution:

For wrapper content:

Or for single item:

Moreover, we have an opportunity to justify our grid elements (rows and columns) in horizontal and vertical direction. Sometimes we must do it when our grid container is larger than the total size of grid elements to make layout looks cool. For horizontal layout service we can use: justify-content, which is similar to flex-box (e.g. justify-content: flex-start, flex-end … ), which got values:

  • Start – align all grid elements to left (default)

  • End – align all grid items to right

  • Center – align grid to center

  • Stretch – resize grid items to fill whole grid container

  • Space-around – arrange grid elements with an even amount of space between each element, and half of it before first and after the last element of a grid.

  • Space-between – arrange grid elements with an even amount of space between each element, with no space before first and after the last element of a grid.

  • Space-evenly – arrange grid elements with an even amount of space between each element, and the same amount of space before first and after the last element of a grid.

To align items vertically, we can use align-content which get same values as justify-content but this property works along column axis.

Location of grid items, children of grid container

There are several possibilities to assign a place to grid element, first of all we can use four parameters:

  • Grid-column-start
  • Grid-column-end
  • Grid-row-start
  • Grid-row-end

With values:

  • [number] – Number of lines after which grid element starts
  • Span [number] – item will expand until find [number] of grid tracks
  • Span [name] – item will expand until find [name] of grid tracks
  • Auto – item will be placed automatically

There is shorthand for above parameters:

  • Grid-column: [ Grid-column-start ] / [ Grid-column-end ]
  • Grid-row: [ Grid-row-start ] / [ Grid-row-end ]


For example, we want to place, header, side, and footer in the example:

Let’s see line names:

To set aside element, we need to add css:

We can use shorthand,  grid-column, grid-row with values [start line/end line] :

Another way to assign ian tem to the area is mentioned before grid-area where we can put as value name of the area (only when we using grid-template) or sequence of values [row-start / column-start / row-end / column-end] to select the area to cover, by grid element.
Which makes our example pretty simple:

Moreover, you can align vertically item inside grid item, using align-self, remember to set display: grid, to a parent element, then you can feel free to set values:

  • Start – aligns grid item content to left
  • End – align grid item content to right
  • Center – align grid item to center
  • Stretch – (default) fulfill the whole area of grid element

To align content of grid item vertically, we can use justify-self which takes same values as justify-self but aligns items vertically

  • Start – justify grid item content to top
  • End – justify grid item content to bottom
  • Center – justify grid item to center
  • Stretch – (default) fulfill the whole area of grid element

See example below:

To sum up, I belive that display grid promises to be a big step in css forwardness with its two-dimensional layout, and easy to maintain and prepare RWD areas. I hope that we make this new capabilities easiest to understand, now have a look for browser support:


IE Edge Firefix Chrome Safari Opera Safari Opera Mini Android


11 14+ 52+ 58+ 10.1 46 10.3 56 59

Based on: