← Course Home Previous: Order Next: Shorthand See Finish

Gaps - Starting Point

Control spacing between flex items with the gap property.

Without Gap (using margins)

Item 1

Item 2

Item 3

Item 4

Using margins for spacing

With Gap Property

Item 1

Item 2

Item 3

Item 4

Using the gap property

Wrapped Items with Gap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Gap works with wrapped items too!

Different Row and Column Gaps

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Different spacing for rows vs columns

Instructions

Add display: flex and experiment with gap, row-gap, and column-gap!