Grid by example

display: grid Sets an element to be a grid

grid-template-columns: 200px 200px 200px Creates three columns of 200px

grid template-rows: 200px 100px Creates rows of heights 200px and 100px

grid-auto-rows: 100px Sets any rows not specified explicitly to be 100px

grid-column-gap: 20px Sets a horizontal gap of 20px

grid-row-gap: 20px Sets a vertical gap of 20px

fr unit is used to divide the space evenly: grid-template-columns: 1fr 1fr 1fr; gives us three cols

Repeat notation is a shorthand for the above: grid-template-columns: repeat(3, 1fr) grid-template-columns: repeat(2, 1fr 2fr) grid-template-columns: 100px repeat(2, 1fr 2fr)

minmax lets you set a column to have a min and max width grid-template-columns: minmax(200px, 400px)

To set a row to have min 60px height max auto to let your rows grow but have a min height grid-auto-rows: minmax(60px, auto)