CSS Flexbox and Grid: The Complete Layout Guide With Every Property Explained

/* Flex container: controls how children are laid out */
.container {
 display: flex;
 flex-direction: row; /* row | row-reverse | column | column-reverse */
 flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
 justify-content: space-between; /* Main axis alignment */
 align-items: center; /* Cross axis alignment */
 align-content: stretch; /* Multi-line cross axis */
 gap: 16px; /* Space between items (shorthand for row-gap column-gap) */
}

/* justify-content values:
 flex-start | flex-end | center |
 space-between | space-around | space-evenly */

/* align-items values:
 flex-start | flex-end | center |
 stretch (default) | baseline */

/* flex-grow: how much to grow relative to siblings */
.item { flex-grow: 1; } /* All items grow equally, filling container */
.sidebar { flex-grow: 0; } /* Stays at content size */
.main { flex-grow: 3; } /* Gets 3x more space than flex-grow:1 siblings */

/* flex-shrink: how much to shrink when container is too small */
.item { flex-shrink: 1; } /* Default: shrinks proportionally */
.item { flex-shrink: 0; } /* Never shrinks — useful for fixed-size items */

/* flex-basis: starting size before grow/shrink applies */
.item { flex-basis: 200px; } /* Start at 200px, then grow/shrink */
.item { flex-basis: auto; } /* Use content size as starting point */

/* Shorthand: flex: grow shrink basis */
.item { flex: 1 1 auto; } /* Grow, shrink, auto basis — most common */
.item { flex: 1; } /* flex: 1 1 0 */
.item { flex: none; } /* flex: 0 0 auto — fixed size */

/* align-self: override container's align-items for one item */
.special { align-self: flex-end; }

/* order: visual reordering without changing DOM */
.first { order: -1; } /* Move to front visually */

/* 1. Perfect center (most searched CSS question ever) */
.center {
 display: flex;
 justify-content: center;
 align-items: center;
}

/* 2. Navbar: logo left, nav right */
.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

/* 3. Card with footer pinned to bottom */
.card {
 display: flex;
 flex-direction: column;
 height: 300px;
}
.card-content { flex: 1; } /* Grows to fill space */
.card-footer { /* Stays at bottom */ }

/* 4. Responsive wrapping grid */
.flex-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
}
.flex-grid > * {
 flex: 1 1 250px; /* At least 250px wide, grows to fill */
}

/* Define tracks with grid-template-columns and rows */
.grid {
 display: grid;
 grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed + 2 flexible */
 grid-template-rows: auto; /* Rows size to content */
 gap: 24px; /* Space between cells */
}

/* fr unit: fraction of available space */
/* 1fr 2fr 1fr = 25% 50% 25% of space */

/* repeat() shorthand */
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive! */
/* auto-fill: creates as many tracks as fit
 minmax(250px, 1fr): each at least 250px, max 1fr
 Result: responsive grid WITHOUT media queries */

/* Named template areas — most readable grid layout */
.layout {
 display: grid;
 grid-template-areas:
 "header header header"
 "sidebar main main "
 "footer footer footer";
 grid-template-columns: 250px 1fr 1fr;
 grid-template-rows: 60px 1fr 50px;
 min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Explicit placement with line numbers */
.item {
 grid-column: 1 / 3; /* Span from line 1 to line 3 (2 columns) */
 grid-row: 1 / 2; /* Single row */
}
.item {
 grid-column: 1 / -1; /* Span all columns (-1 = last line) */
 grid-row: span 2; /* Span 2 rows from current position */
}

/* Cards wrap to as many columns as fit, each at least 16rem wide. No media query. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem;
}

/* auto-fit collapses empty tracks, so a short row of items stretches to fill the width. */
.cards--stretch {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

/* Named lines: place items by meaning instead of by column number. */
.page {
  display: grid;
  grid-template-columns: [full-start] minmax(1rem, 1fr) [content-start] minmax(0, 65ch) [content-end] minmax(1rem, 1fr) [full-end];
}
.page > * { grid-column: content; }          /* uses content-start / content-end */
.page > .bleed { grid-column: full; }        /* full-width banner or image */

/* Subgrid: each card's header, body and footer line up across the row. */
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}