0. Layouts before Grid
Examines use of display: inline-block
, float
and display: flex
.
inline-block
technique
Item A
Item B
Item C
Item D
Item E
Item F
float
technique
Item A
Item B
Item C
Item D
Item E
Item F
flexbox
technique
Item A
Item B
Item C
Item D
Item E
Item F
1.1 Defining a grid
Covers grid-template-columns
, grid-template-rows
and grid-gap
.
Item A
Item B
Item C
Item D
Item E
Item F
1.2 Naming grid areas
Item A
Item B
Item C
1.3 The fr
unit
Item A
Item B
Item C
1.4 The minmax()
function
Item A
Item B
Item C
1.5 The repeat()
function
Item
Item
Item
Item
Item
Item
Item
Item
1.6 auto-fill
versus auto-fit
Item A
Item B
Item C
Item D
Item E
1.7 Altogether now
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
2.1 grid-column
and grid-row
🍏
🍊
🥥
🥑
🍇
🍌
2.2 grid-area
Item A
Item B
Item C