CSS Grid

CSS Grid is a powerful tool that allows you to create two-dimensional layouts on the web.

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.

It is a 2-dimensional system, which means it can handle both columns and rows, unlike flex box which is largely a 1-dimensional system.

To make an HTML element behave as a grid parent, you have to set the display property to grid or inline-grid. (display: grid)

Grid parents consist of grid children, placed inside columns and rows.

display

Defines an element as a grid container.

Values :

grid : generates a block level grid

inline-grid : generates an inline-level grid

.grid-container {
  display: grid | inline-grid;
}

Codepen Example

The grid-template-columns Property

The grid-template-columns property defines the number of columns in 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.

Example

Set a size for the 3 columns:

.grid-parent {
    display:grid;
    grid-template-columns: 400px 300px auto;
}

Codepen Example

 

The grid-template-rows Property

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

Codepen Example

The justify-content Property

The justify-content property is used to align the whole grid inside the parent.

Values of justify-content properties

space-evenly
The value “space-evenly” will give the columns equal amount of space between, and around them.

space-around
The value “space-around” will give the columns equal amount of space around them.

space-between
The value “space-between” will give the columns equal amount of space between them.

center
The value “center” will align the grid in the middle of the parent.

start
The value “start” will align the grid at the beginning of the parent.

end
The value “end” will align the grid at the end of the parent:

Codepen Example

 

The align-content Property

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

Values of align-content properties

center
The value “center” will align the rows in the middle of the parent.

space-evenly
The value “space-evenly” will give the rows equal amount of space between, and around them.

space-around
The value “space-around” will give the rows equal amount of space around them.

space-between
The value “space-between” will give the rows equal amount of space between them.

start
The value “start” will align the rows at the beginning of the parent.

end
The value “end” will align the rows at the end of the parent.

Codepen Example

 

Grid Child

A grid parent contains grid child.

By default, a parent has one grid child for each column, in each row, but you can style the grid child so that they will span multiple columns and/or rows.

The grid-column Property

The grid-column property defines which column(s) to place a child. To place a child, you can refer to line numbers, or use the keyword “span” to define how many columns the child will span. Use the grid-column property to specify where to place a child.

Codepen Example

The grid-row Property

The grid-row property defines which row to place a child.

To place a child, you can refer to line numbers, or use the keyword “span” to define how many rows the child will span.

Codepen Example

The grid-area Property

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Example

grid-area : grid-row-start/ grid-column-start/grid-row-end/grid-column-end ;
grid-area: 1/2/3/5;

Here, first value is the row start, second is the column start, third is the row end and the fourth is the column end.

Codepen Example

Naming Grid child

The grid-area property can also be used to assign names to grid children.

Named grid child can be referred to by the grid-template-areas property of the grid container.

Below we are naming the grid children using grid-area.
.grid-child-1{ grid-area: area1;} 
.grid-child-2{ grid-area: area2;} 
.grid-child-3{ grid-area: area3;} 
.grid-child-4{ grid-area: area4;} 

Using the named grid areas in the template areas of grid container.
grid-template-areas: 'area1 area1 area1 area2 area3 area4';

Codepen Example

The Order property

The order property is used to change the position of the child.

The Grid Layout allows us to position the child anywhere we like.

Codepen Example