CSS Grid Layout

The Grid Layout in CSS provides us a grid or table like page layout with rows and columns.

The layout is very handy when you want to avoid positioning and floats. Unlike, the website layout, the grid layout doesn’t have a fixed number of sections and is flexible as per the requirements.

The general layout contains a parent element with multiple child elements.

Display Property

To make any HTML element a grid container, you just have to set the display property to ‘inline-grid’ or simply ‘grid’. The grid container will be the parent element and its child elements will be termed as grid items.

Grid Gaps

The vertical line formed by the grid items is called the grid column and the horizontal one is known as the grid row.

The spaces between the consecutive grid columns or rows is called a grid gaps. CSS allows us to alter the grid gaps for better presentation of the web-page. For this purpose, we have following four properties:

  • grid-column-gap: Adjusting the gaps for grid columns.
  • grid-row-gap: Adjusting the gaps for grid rows.
  • grid-gap: Shorthand property. Two values can be given for column and row respectively or s single value can also be given for both
  • grid-template-columns

    You can define the number of columns of your grid, using this property. It also helps us to set the column widths. Values are given in space separated list of width for respective columns.

    You can give specific length values for the width or ‘auto’ to equally divide the width of the grid container.


    Similar to grid-template-column, this property can be used to define the heights of the grid-rows.


    This property gets you the whole grid aligned inside the grid container.


    This property is for the vertical alignment of the grid inside the grid container.