Flexbox & Grid

When to Use Which

Use Case	Flexbox	Grid
Single-axis layout (row or column)	Yes	Overkill
Two-dimensional layout	Awkward	Yes
Content-driven sizing	Yes	Yes
Precise track control	No	Yes
Unknown number of items wrapping	flex-wrap	auto-fill/auto-fit

Flexbox – Common Patterns & Gotchas

The flex Shorthand

/* flex: <grow> <shrink> <basis> */
.item { flex: 1 1 0%; }    /* equal sizing — basis 0 */
.item { flex: 0 0 auto; }  /* no grow/shrink — natural size */
.item { flex: 1; }         /* same as 1 1 0% */

min-width: 0 Fix

Flex items default to min-width: auto, which prevents shrinking below content size:

.overflow-item {
  flex: 1;
  min-width: 0;         /* allow shrinking past content */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Centering

.container {
  display: flex;
  justify-content: center;  /* main axis */
  align-items: center;      /* cross axis */
}

Grid – Common Patterns

Responsive Grid without Media Queries

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

• auto-fill: Creates as many tracks as fit, even if empty
• auto-fit: Same but collapses empty tracks (items stretch)

Named Grid Areas

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Subgrid

Allows nested grids to inherit parent track sizing:

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid; /* inherits parent's 3 columns */
}

gap vs Margins

gap only applies between items, not on edges — cleaner than margin hacks:

.flex-container { display: flex; gap: 1rem; }
.grid-container { display: grid; gap: 1rem 2rem; } /* row-gap column-gap */