Learn Frontend Part 4: CSS Layout - Flexbox, Grid and Responsive Design

Layout used to mean floats, clearfix hacks and tables. Today two systems handle almost everything: Flexbox for arranging items in one direction and CSS Grid for two-dimensional layouts. Add a mobile-first responsive strategy and you can build any modern interface with surprisingly little CSS.

This is Part 4 of the Learn Frontend series. We cover Flexbox, Grid, when to use each, responsive design with media and container queries, and a few patterns that come up in interviews and machine-coding rounds.

1. Flexbox: one-dimensional layout

Setting display: flex on a container lays its children out along a main axis (a row by default) with a perpendicular cross axis.

On the items, flex: 1 (shorthand for grow 1, shrink 1, basis 0) makes them share free space equally; flex-shrink: 0 stops an item from shrinking; margin-left: auto pushes an item to the far end.

/* Navbar: logo left, links right, vertically centred */
.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
}
.navbar .logo  { font-weight: 700; }
.navbar .links { margin-left: auto; display: flex; gap: 12px; }

/* Perfect centring */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

2. CSS Grid: two-dimensional layout

Grid defines rows and columns at the same time, so it is ideal for page layouts, galleries and dashboards.

• grid-template-columns: 200px 1fr 1fr creates three columns; fr units share the remaining space.
• repeat(auto-fill, minmax(220px, 1fr)) fits as many columns as possible, each at least 220px wide: a fully responsive card grid with no media queries.
• grid-template-areas names regions so the layout reads like a picture in your CSS.
• Items can span with grid-column: span 2 or be placed exactly with line numbers.

/* Responsive card grid: no media queries needed */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Page layout with named areas */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 16px;
}
.page header { grid-area: header; }
.page aside  { grid-area: sidebar; }
.page main   { grid-area: main; }
.page footer { grid-area: footer; }

3. Flexbox or Grid?

They work well together: a Grid page layout whose header uses Flexbox, for example. The classic "centre a div" interview question is answered with either display: flex; justify-content: center; align-items: center; or display: grid; place-items: center;.

4. Responsive design

Responsive pages adapt to any screen size. Start with the viewport meta tag (Part 2), then follow a mobile-first approach: write base styles for small screens and add min-width media queries as space grows.

/* Mobile first: one column by default */
.page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "sidebar" "footer";
}

/* Wider screens: add the sidebar column */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 240px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

• Fluid by default: use percentages, fr, max-width and clamp() so most things adapt without breakpoints.
• Responsive images: max-width: 100%; height: auto; plus srcset and the <picture> element for art direction.
• Container queries: @container (min-width: 400px) lets a component adapt to the space its parent gives it rather than to the whole viewport, which is ideal for reusable cards.
• User preferences: prefers-color-scheme for dark mode and prefers-reduced-motion to tone down animations.

5. Layout patterns worth practising

• Sticky footer: make the body a column flex container with min-height: 100dvh and give main flex: 1.
• Sidebar layout: grid-template-columns: 260px 1fr, collapsing to one column on small screens.
• Card grid: repeat(auto-fill, minmax(...)) with gap.
• Truncating text: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; (in a flex child, also add min-width: 0).
• Aspect ratio boxes: aspect-ratio: 16 / 9 for video embeds and thumbnails.

Practice problems

Build each of these without any CSS framework. They are common machine-coding round tasks.

1. Centre a box horizontally and vertically in three different ways.
2. Build a responsive navbar that collapses into a menu button below 768px.
3. Create a product card grid that shows 1, 2, 3 or 4 columns depending on width, without media queries.
4. Build a dashboard shell with header, sidebar, main and footer using grid-template-areas.
5. Make a footer that stays at the bottom on short pages but flows normally on long ones.
6. Create a card component that switches to a horizontal layout using a container query.
7. Play Flexbox Froggy and Grid Garden to drill the properties.