display: inline-block
This is one of the older methods for layout. It's a hybrid between `inline` (like words in a sentence) and `block` (like paragraphs).
- Like `inline`: Elements flow side-by-side in a line.
- Like `block`: You can control the `width`, `height`, `margin`, and `padding` (which you can't do on a normal `inline` element).
- Main Problem: It respects whitespace in your HTML, creating small, annoying gaps between elements.
display: flex (Flexbox)
Flexbox is a modern, powerful 1-Dimensional (1D) layout system. It's designed to align and distribute items in a single row OR a single column.
Analogy: Think of it as a smart bookshelf. You can tell it to stack books vertically (`flex-direction: column`) or line them up horizontally (`flex-direction: row`). You can also tell it how to space them out (`justify-content`).
- `flex-direction` (The Main Axis): Do items flow in a `row` (left-to-right) or a `column` (top-to-bottom)?
- `justify-content` (Main Axis Alignment): How are items spaced out along the main axis? (`flex-start`, `center`, `space-between`).
- `align-items` (Cross Axis Alignment): How are items aligned on the *other* axis? (e.g., if direction is `row`, this controls vertical alignment).
display: grid (CSS Grid)
CSS Grid is the most powerful and modern layout system. It is 2-Dimensional (2D), meaning it controls layout in both rows AND columns at the same time.
Analogy: Think of it as a spreadsheet, a chessboard, or a muffin tin. You define the grid (e.g., "I want 3 columns and 2 rows"), and then you place your items into the "cells" you've created.
- `grid-template-columns` / `grid-template-rows`: Defines the size and number of your columns and rows. The `fr` (fractional) unit is very useful here (e.g., `1fr 1fr 1fr` means 3 equal columns).
- `gap` (or `grid-gap`): The space *between* your items. So much easier than `margin`!
- Spanning: You can make a single item take up multiple cells (e.g., `grid-column: span 2;`).