Week 11 - Example 1: CSS Grid

Back

Here is a good guide on CSS-Tricks: https://css-tricks.com/snippets/css/complete-guide-grid/

Display

display: grid

Item 1
Item 2
Item 3
Item 4
..text..

display: inline-grid

Item 1
Item 2
Item 3
Item 4
..text..

Direction

grid-auto-flow: row

Item 1
Item 2
Item 3
Item 4

grid-auto-flow: column

Item 1
Item 2
Item 3
Item 4

How many cols/rows

grid-template-columns: 1fr 1fr;

Item 1
Item 2
Item 3
Item 4

grid-template-rows: 1fr 1fr;

Item 1
Item 2
Item 3
Item 4

Gap

gap: 10px;

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4