CSS Layout

Flexbox

Flexbox is a layout mechanism that lays elements out across a single access either horizontal or vertical. By default the elements will align the children next to each other in the inline direction ans stretch them in the block direction so they’re all the same height. It treats selected elements as a group rather than being able to control selected elements.

Grid

Grid is similar to flexbox but exists on a multi-axis instead of a single axis layout like flex. Grid allows you to control individual elements rather than treating them like a group.

Example grid functions:

Using the fr unit, you can tell how big of the fraction of the remaining space you want the selected element to take up. Column count allows you to split up lists into multiple columns to make it easier on the user to read.