Learn the CSS Grid!
grid-template-columns defines how the elements will be divided into vertical columns and how they will be sized in relation to each other.
Column 1
Column 2
Column 3
Current Value:
grid-template-columns: 1fr 200px 1fr
grid-template-rows defines how the elements will be divided into horizontal rows and how they will be sized in relation to each other.
Row 1
Row 2
Current Value:
grid-template-rows: 2fr 100px
Defines the horizontal space between all columns.
Defines the vertical space between all rows.
Defines how the items will be aligned horizontally in each column.
Defines how the items will be aligned vertically in each row.
1
2
3
4
.container {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 2fr 100px;
grid-column-gap: 20px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}