Flexbox — One Dimension
Best for rows or columns of items: navbars, card rows, centering.
.container {
display: flex;
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 1rem;
}
Grid — Two Dimensions
Best for page layouts and complex 2D structures.
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
gap: 1.5rem;
}
When to Use Which?
| Scenario | Use |
|---|---|
| Navbar | Flexbox |
| Holy grail layout | Grid |
| Card grid (equal columns) | Grid or Flexbox wrap |
| Vertical centering | Either |
Interview Questions
Q: Center a div horizontally and vertically?
.parent { display: flex; justify-content: center; align-items: center; }
/* or */
.parent { display: grid; place-items: center; }
Q: What is fr unit?
Fraction of available space in grid. 1fr 1fr splits equally.
Q: flex: 1 shorthand?
flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: 0% — item grows to fill space.