CSS Grid Container


<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
CSS Grid Container
❮ Previous
Next ❯
1
2
3
4
5
6
7
8
Try it Yourself »
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 length
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;
Try it Yourself »
Note: If you have more than 4 items in a 4 columns grid, the grid will automatically
add a new row to put the items in.
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;
Try it Yourself »
The grid-template-rows Property
The grid-template-rows
property defines the height of each row.
1
2
3
4
5
6
7
8
The value is a space-separated-list, where each value defines the the height of the respective row:
Example
.grid-container
display: grid;
grid-template-rows: 80px 200px;
Try it Yourself »
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;
Try it Yourself »
Example
.grid-container
display: grid;
justify-content: space-around;
Try it Yourself »
Example
.grid-container
display: grid;
justify-content: space-between;
Try it Yourself »
Example
.grid-container
display: grid;
justify-content: center;
Try it Yourself »
Example
.grid-container
display: grid;
justify-content: start;
Try it Yourself »
Example
.grid-container
display: grid;
justify-content: end;
Try it Yourself »
The align-content Property
The align-content
property is used to
vertically align the whole grid inside the container.
1
2
3
4
5
6
Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.
Example
.grid-container
display: grid;
height: 400px;
align-content: center;
Try it Yourself »
Example
.grid-container
display: grid;
height: 400px;
align-content: space-evenly;
Try it Yourself »
Example
.grid-container
display: grid;
height: 400px;
align-content: space-around;
Try it Yourself »
Example
.grid-container
display: grid;
height: 400px;
align-content: space-between;
Try it Yourself »
Example
.grid-container
display: grid;
height: 400px;
align-content: start;
Try it Yourself »
Example
.grid-container
display: grid;
height: 400px;
align-content: end;
Try it Yourself »
❮ Previous
Next ❯