CSS Grid
Grid layout is a new and powerful CSS layout system that allows to divide a web page content into rows and columns in an easy way.
The CSS Grid is defined as a display property. It applies to a parent element and its immediate children only
Example
display: grid;
However, doing this will invariably cause all the child elements to collapse on top of one another. This is because the children do not currently know how to position themselves within the grid. But we can explicitly tell them.
First we need to tell the grid element .container how many rows and columns will make up its structure and we can do this using the grid-columns and grid-rows properties (note the pluralisation):.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
However, that still doesn't help us much because we need to give an order to each child element. We can do this by specifying the grid-row and grid-column values which will tell it where it sits in the grid:
.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;
grid-row: 2;
}
By giving each item a column and row value it identifies the items order within the container.