Layout with CSS: Box Model, Flexbox, and Grid
How Layout Works
The box model
Every element on a page behaves like a box. The box model includes content, padding, border, and margin.
Box model parts
| Part | Meaning |
|---|---|
| Content | The actual text or image |
| Padding | Space inside the border |
| Border | The line around the element |
| Margin | Space outside the border |
Modern layout tools
Flexbox is great for arranging items in one direction, such as a row or column. Grid is great for two-dimensional layouts with rows and columns.
Flexbox vs Grid
Flexbox
- One-dimensional layout
- Good for nav bars, toolbars, aligned rows or columns
Grid
- Two-dimensional layout
- Good for page sections, cards, and structured layouts
Rule of thumb
Use Flexbox for alignment in one direction and Grid for overall page structure when both rows and columns matter.
Which CSS layout system is especially useful for two-dimensional page structures?
Grid is designed for rows and columns together.
Correct answer: Grid
Name the four main parts of the box model.
These four layers describe how space is built around an element.
Correct answer: Content, padding, border, and margin.
Which tool is usually best for laying out items in a single row?
Flexbox is ideal for one-direction alignment.
Correct answer: Flexbox