Default alignment/distributions of columns is space-between. We set the width of columns in % and browsers align columns to the left and right and distribute the rest of the space evenly between the remaining spaces

2 columns Center (space around)

Column

Column

Column

Column


2 columns

Column

Column

Column

Column


2 columns with border

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column


2 columns 40x60% center (space-around)

Column

Column

Column

Column

Column

Column


2 columns 40x60%

Column

Column

Column

Column

Column

Column


2 columns 40x60% with border

Column

Column

Column

Column

Column

Column


2 columns 25x75%

Column

Column

Column

Column


2 columns 20x80%

Column

Column

Column

Column


3-to-1 columns, 3 items

Column 1

Column 2

Column 3


3-to-1 columns, 3 items centered (space-around)

Column 1

Column 2

Column 3


3-to-2 columns, 6 items 1 row

Column 1 Item 1

Column 2 Item 2

Column 3 Item 3

Column 4 Item 4

Column 5 Item 5

Column 6 Item 6


3-to-1 columns, 6 items 1 row items meshed

Column 1

Item 1

Item 4

Column 2

Item 2

Item 5

Column 3

Item 3

Item 6


3-to-2 columns, 6 items 1 row items meshed

Column 1

Item 1

Item 4

Column 2

Item 2

Item 5

Column 3

Item 3

Item 6


3-to-2 columns, 6 items 2 rows

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6


4 columns

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column


4 columns center aligned (space-around)

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column


2 columns with colored borders (final styling pending)

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column


Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column


Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column


Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column


Column Column Column Column Column Column Column Column Column Column Column Column

Column Column Column Column Column Column Column Column Column Column Column Column