Understanding the fundamentals of CSS Layout

Gall’s law: All complex systems that work, evolved from simple systems that worked.

CSS is built on a set of small, logical concepts that each are easy to understand, from “text goes left to right, top to bottom” to “everything is a box” to “elements can be taken outside of flow”.

Flexbox is “bottom up”:

1. Get a bunch of elements
2. Order them in a row or column
3. Distribute them according to rules you provide

Grid is “top down”:

1. Create a bunch of areas
2. Determine their sizes and positions of those areas according to rules you provide
3. Place elements inside those areas

A very big difference between Flex and Grid on one hand and previous positioning on the other hand is that Flex and Grid no longer depend on font properties. The layouts you make and their alignment are based on the generated boxes, not on the font properties of the elements.

The final boss: centering a <div>

.container {
  place-content: center;
}