Intro

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Browser Support:

The grid properties are supported in all modern browsers.

Display property:

An HTML element becomes a grid container when its display property is set to

  • Grid
  • inline-grid
  • subgrid

All directchildren of the grid container automatically become grid items/children.

display: grid;

Grid Template

Defines the rows and columns of the grid.

grid-template-columns

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a space-separated-list, where each value defines the width of the respective column.

grid-template-rows

The grid-template-rows property defines the height of each row.

grid-template-columns: 12px 12px 12px;

grid-template-rows: 12px 12px 12px;

grid-template-columns: repeat(3, 12px);

grid-template-rows: repeat(3, auto);

grid-template-columns: 22% 22% auto;

grid-template-rows: 22% auto 22%;

Grid Gap

Specifies the size of column and row gutters.

You can adjust the gap size by using one of the following properties:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

Align Items

The align-items property is used to vertically align the whole grid inside the container.

Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.

align-items: center;

align-items: start;

align-items: end;

align-items: stretch; /*(default)*/

Justify Content

The align-content property is used to vertically align the whole grid inside the container.

Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.

justify-content: start;

justify-content: end;

Justify-content: center;

justify-content: stretch;

justify-content: space-around;

justify-content: space-between;

justify-content: space-evenly;

Grid Area

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end

itemname: Specifies a name for the grid item

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Grid-column

Determines an items column-based location within the grid.

grid-column: 2 / 3;

grid-column: 2 / span 2

grid-column-start: 1;

grid-column-end: 3;

Grid-row

Determines an items row-based location within the grid.

grid-row: 1 / 3;

grid-row: 1 / span 3;

grid-row-start: 1;

grid-row-end: 3;