Griddy

Learn the CSS Grid!

Add or Remove elements within the grid

Grid Template Columns

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

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
 }