CSS Grid & Flexbox

CSS provides two powerful layout systems. Grid is ideal for two-dimensional layouts (rows and columns). Flexbox excels in one-dimensional flow (a row or a column). Use them together for clean, responsive pages.

Abstract geometric grid illustrating rows and columns in a layout — Grid handles both axes; Flexbox focuses on one axis at a time.

CSS Grid Overview

Great for arranging cards, galleries, and full-page sections.
Controls columns and rows via grid-template-columns, grid-template-rows, and gap.
Responsive patterns with repeat(), auto-fit, and minmax() minimize media queries.

Grid Demo (auto-fit + minmax)

The cards below auto-wrap into responsive columns. Resize the window to see it adapt.

Card A

Auto-fit columns using repeat(auto-fit, minmax(260px, 1fr)).

Card B

Consistent spacing via gap. Borders provide structure.

Card C

Each card has padding and a hover effect for feedback.

Card D

Great for galleries, feature grids, and dashboards.

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

Core Grid rule used by this page’s card layout.

Flexbox Overview

Ideal for navbars, toolbars, and aligning content in one direction.
Key properties: display: flex, flex-direction, justify-content, align-items, and gap.
Combine with Grid: Grid for the big picture, Flex inside components.

Flex Demo (row toolbar)

Row alignment with spacing and an action cluster.

Toolbar

Grid Flex Action

Flex Demo (column stack)

Switch to a column for a clean vertical stack with even spacing.

Item 1

Aligned naturally in a column; card styling adds padding and border.

Item 2

Use Flex for stacks, settings panels, or sidebars.

.toolbar{
  display:flex; gap:.75rem; align-items:center;
}
.toolbar .spacer{ margin-left:auto; }

Typical Flex helpers for a toolbar layout.

When to Use Which?

Use Grid for page sections, dashboards, galleries, and card layouts.
Use Flex for nav bars, toolbars, horizontal button rows, and simple alignment.
Combine them: Grid for overall layout; Flex inside components for tidy alignment.