Grid is the new black

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