Grid in CSS

Grid used to arrange elements in rows and columns. Its a two dimensional layout.

display : grid; - enable grid layout.
grid-template-columns - set number and size of columns.
grid-template-rows - set number and size of rows.
gap - adds space between rows and columns.
grid-column - define how many columns an item occupies.
grid-row - define how many rows an item occupies.

.container {
display : grid;
grid-template-columns : 1fr 1fr 1fr;
gap : 20px;