The display property

Here's a primer to help you get started width display: ???, the basic tool for doing layouts in HTML and CSS. As always there's a ton of values that can be used, but we'll just focus on the most common/useful ones.

The good old ones

First the good old ones that you apply directly on each element.

inline

Elements are stacked one after the other on the same line until there's no space so a new line is created.

block

Elements are stacks on top of each other.

inline-block

The best of both worlds as it acts like an inline element but its height and width can be changed!

Those values are still in use today but are way less common in modern layout than they used to. Before flexbox and grid, developers used a lot of inline-block layouts to make responsive design work and content flow nicely. It was sometimes very complicated and the reason why things like grid frameworks were very popular.

Today there is absolutely no reason to not use flexbox and grid. They can even be used on Internet Explorer 11 if written correctly and compiled with a tool like Autoprefixer.

Next: Flexbox, the goat