Layout: Flexbox & Grid

contain

CSS Layout Evolution

  1. Tables (1990s) - Don't do this!
  2. Floats (2000s) - Hacky, but it worked
  3. Flexbox (2010s) - One-dimensional layouts
  4. Grid (2017+) - Two-dimensional layouts

Today we use Flexbox and Grid together.

Flexbox vs Grid

Flexbox Grid
One direction at a time Two directions at once
Navigation bars Page layouts
Card rows Photo galleries
Centering content Complex layouts

Often you'll use both on the same page!

Flexbox

Flexbox Basics

.container {
  display: flex;
}

This makes all direct children flex items that:

  • Line up in a row (by default)
  • Shrink/grow to fit
  • Can be easily aligned

Flex Direction

.container {
  display: flex;
  flex-direction: row;         /* default: left to right */
  flex-direction: row-reverse; /* right to left */
  flex-direction: column;      /* top to bottom */
  flex-direction: column-reverse;
}

Justify Content (Main Axis)

.container {
  display: flex;
  justify-content: flex-start;    /* default */
  justify-content: flex-end;      /* end of container */
  justify-content: center;        /* center */
  justify-content: space-between; /* equal space between */
  justify-content: space-around;  /* equal space around */
  justify-content: space-evenly;  /* truly equal spacing */
}

Align Items (Cross Axis)

.container {
  display: flex;
  align-items: stretch;    /* default: fill height */
  align-items: flex-start; /* top */
  align-items: flex-end;   /* bottom */
  align-items: center;     /* middle */
}

Perfect Centering with Flexbox

.container {
  display: flex;
  justify-content: center;  /* horizontal center */
  align-items: center;      /* vertical center */
  height: 100vh;            /* full viewport height */
}

This is the easiest way to center anything!

Flex Wrap

.container {
  display: flex;
  flex-wrap: nowrap; /* default: all on one line */
  flex-wrap: wrap;   /* wrap to next line */
}

Gap

.container {
  display: flex;
  gap: 20px;      /* space between items */
  row-gap: 10px;  /* vertical gap only */
  column-gap: 20px; /* horizontal gap only */
}

Flex Item Properties

.item {
  flex-grow: 1;   /* grow to fill space (0 = don't grow) */
  flex-shrink: 1; /* shrink if needed (0 = don't shrink) */
  flex-basis: 200px; /* starting size */

  /* Shorthand */
  flex: 1;        /* grow: 1, shrink: 1, basis: 0 */
  flex: 0 0 200px; /* don't grow, don't shrink, 200px */
}

Flexbox Example: Navigation

<nav class="navbar">
  <a href="/">Logo</a>
  <ul class="nav-links">
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

CSS Grid

Grid Basics

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  grid-template-rows: 100px 200px;    /* 2 rows */
  gap: 20px;
}

Defining Columns

.container {
  display: grid;

  /* Fixed widths */
  grid-template-columns: 200px 300px 200px;

  /* Flexible with fr (fraction) */
  grid-template-columns: 1fr 2fr 1fr;

  /* Repeat */
  grid-template-columns: repeat(3, 1fr);

  /* Auto-fit for responsive */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Grid Item Placement

.item {
  grid-column: 1 / 3;  /* span columns 1-2 */
  grid-row: 1 / 2;     /* row 1 only */

  /* Shorthand */
  grid-column: span 2; /* span 2 columns */
  grid-row: span 3;    /* span 3 rows */
}

Grid Template Areas

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

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

Grid Example: Card Layout

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Flexbox vs Grid Summary

Use Flexbox when:

  • Content flows in one direction
  • You want items to determine their own size
  • Alignment within a row/column

Use Grid when:

  • You need rows AND columns
  • You want precise control over layout
  • Complex page structures

Practice Games!

References