CSS Grid

1. Grid Container Properties

Here we introduce: display: grid, gap, rows, columns, implicit grid, explicit grid

1
2
3
4
5
6

2. Responsive Grid without Media Queries

We use auto-fit and minmax() to make a fully responsive grid.

3. Dense Packing (auto-flow: dense)

This shows how CSS Grid automatically fills empty spaces.

A
B
C
D
E
F

4. Full 2D Layout

Header
Sidebar
Content
Ads
Footer

5. Bento Grid Layout

1
2
3
4
5