The CSS grid is a two-dimensional design system, we can work with lines and columns together, which means it opens up many different opportunities to build complex and structured building systems, without going back to other "tricky" methods we used in the past.
To define a grid container, all you need to do is transfer the display property: grid to your block object. You now have a grid, so you have to specify how many rows and columns you want.Ad Link
To create rows using grid-template-properties, and pass how many times you want, as follows:
grid-template-lines: 100px 100px;
To create columns are almost identical, using grid-template-columns property:
grid-template-columns: 100px 100px;
More examples:
display: grid; [ For more use, inline-grid, subgrid ]
grid-template-columns: 12px 12px 12px; [ For more use, repeat ( 3, 12px ), 8px auto 8px, 22% 22% auto ]
grid-template-rows: 12px 12px 12px; [ For more use, repeat ( 3, auto ), 8px auto 12px, 22% auto 22% ]
grid-gap: 1px 9px; [ For more use, 6px ]
grid-row-gap: 1px;
grid-column-gap: 9px;
justify-items: start; [ For more use, end, center, stretch ( default ) ]
align-items: start; [ For more use, end, center, stretch ( default ) ]
justify-content: start; [ For more use, end, center, stretch, space-around, space-between,space-evenly ]
align-content: start; [ For more use, end, center, stretch, space-around, space-between,space-evenly ]
grid-auto-flow: row; [ For more use, column, dense ]
grid-column: 2/3; [ For more use, 2/span2 ]
grid-column-start: 1; [ For more use, span3, 2 ]
grid-column-end: 3; [ For more use, 4 ]
grid-row: 1/3; [ For more use, 1/span3 ]
grid-row-start: 1; [ For more use, span3/2 ]
grid-row-end: 3; [ For more use, 4 ]
justify-self: start; [ For more use, end, center, stretch ( default ) ]
align-self: start; [ For more use, end, center, stretch ( default ) ]