To set up the grid first you need to establish the container.
The most common two-ways of doing this is to set the display property of the container element to either grid or in-line grid.
Then set the height and width.
display: grid;
height: 100px;
width: 500px;
To define a row in your grid you use the grid-template-rows CSS property.
Each value you give the grid-template-rows property creates a row with the height of that row being equal to that value.
display: grid;
grid-template-rows: 50px 50px 50px;
height: 150px;
width: 250px;
This grid has three rows each with a height of 50px.
To define a column in your grid you use the grid-template-columns CSS property.
Just like the grid-template-rows property, each value you give to the grid-template-columns property creates a column equal to that value.
display: grid;
grid-template-rows: 50px 50px 50px;
grid-template-columns: 100px 100px 100px 100px;
height: 150px;
width: 400px;
This grid has three rows of 50px and four columns of 100px.
A short-hand technique for wrting both grid-template-rows and columns is to just use the grid-template CSS property.
grid-template: 300px 300px 300px / 100px 100px;
The code above creates three 300px rows and two 100px columns.
Anything before the / represents the grid-template-row values and anything after the / represents the grid-template-column values.
You can align the content of a grid along its row axis using the CSS property justify-items.
The values that justify-items takes are:
justify-items: start;justify-items: end;justify-items: center;To align the content of your grid along its column axis use the CSS property align-items.
The values that align-items takes are:
align-items: start;align-items: end;align-items: center;align-items: stretch;By using the grid-row CSS property you can span an item along multiple rows.
This property is used on the grid-item element that you wish to span.
The first grid has the following CSS code styled on the first grid-item:
grid-row-start: 1;
grid-row-end: 3;
The second grid has the following CSS code styled to the first grid-item:
grid-row-start: span 3;
By using the grid-column property you can span an item along multiple columns.
This property is used on the grid-item element that you wish to span.
The first grid has the following CSS code styled on the second grid-item:
grid-column-start: 2;
grid-column-end: 4;
The second grid has the following CSS code styled on the first grid-item:
grid-column-start: span 3;