CSS Multi-column layout

Scenario 1: Fixed number of columns

This code demonstrates how a multi-column layout can be constructed to have 3 columns, regardless of the size of the parent container.

Scenario 2: Flexible column count

This code demonstrates how a multi-column layout can be constructed to have a variable number of columns, each with a minimum width of 200px, depending on the size of the parent container.

Scenario 3: Column breaks

This code demonstrates how column breaks can be controlled through CSS rules.

Scenario 4: Column span

This code demonstrates how column spans can be created through CSS rules, and how column spans create divisions between content within the multi-column layout, effectively restarting the layout after each span.

Scenario 5: Column fill

This code demonstrates how column balancing works.