View Categories

CSS Grid Container

1 min read

1
2
3
4
5
6
7
8

Grid Container #

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

Grid containers consist of grid items, placed inside columns and rows.


  #

The grid-template-columns Property #

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.

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or “auto” if all columns should have the same width.

Example #

Make a grid with 4 columns:

.grid-container { display: grid; grid-template-columns: auto auto auto auto; }

The grid-template-columns property can also be used to specify the size (width) of the columns.

Example #

Set a size for the 4 columns:

.grid-container { display: grid; grid-template-columns: 80px 200px auto 40px; }

The grid-template-rows Property #

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

1
2
3
4
5
6
.grid-container { display: grid; grid-template-rows: 80px 200px; }

The justify-content Property #

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

1
2
3
4
5
6
Note: The grid’s total width has to be less than the container’s width for the justify-content property to have any effect.

Example #

.grid-container { display: grid; justify-content: space-evenly; }

Example #

.grid-container { display: grid; justify-content: space-around; }

Example #

.grid-container { display: grid; justify-content: space-between; }

Example #

.grid-container { display: grid; justify-content: start; }

Example #

.grid-container { display: grid; justify-content: end; }

The align-content Property #

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

Example #

.grid-container { display: grid; height: 400px; align-content: center; }

Example #

.grid-container { display: grid; height: 400px; align-content: space-evenly; }

Example #

.grid-container { display: grid; height: 400px; align-content: space-around; }

Example #

.grid-container { display: grid; height: 400px; align-content: space-between; }

Example #

.grid-container { display: grid; height: 400px; align-content: start; }

Example #

.grid-container { display: grid; height: 400px; align-content: end; }

Powered by BetterDocs

Leave a Reply