Platform under construction

Layout

Advanced

CSS Grid

CSS Grid is a two-dimensional layout system. It controls rows and columns together and is built for real page structure.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

Layout

CSS Grid is for rows and columns at the same time.

When you set display: grid, the container creates grid tracks. Children are placed into rows and columns.

Grid is excellent for card layouts, dashboards, page shells, galleries and areas where both horizontal and vertical structure matter.

The power of grid is not just columns. It is track sizing, placement, gaps and responsive patterns like repeat(auto-fit, minmax()).

Grid container

The parent with display: grid.

Tracks

Rows and columns created by grid-template-columns and grid-template-rows.

fr unit

Distributes available space as fractions.

minmax()

Sets a track minimum and maximum for responsive behavior.

Visual model

Layout is easier when you can name the relationship.

Good layout CSS is not a pile of positions. It is a set of relationships: flow, axis, tracks, placement, layering, sticking and rhythm.

Columns

repeat(3, 1fr)

Three equal flexible columns.

Gap

1rem

Space between rows and columns.

Responsive

auto-fit + minmax

Cards wrap without a breakpoint.

Rows

auto

Rows grow based on content by default.

Examples

Use the layout tool that matches the shape of the problem.

Responsive card grid

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

Fake grid with widths

.card { float: left; width: 31%; margin-right: 2%; }
.card:nth-child(3n) { margin-right: 0; }
.cards::after { content: ""; clear: both; display: block; }

Rules that matter

Strong layout CSS stays readable when the screen changes.

Layout work is where real content, real devices and real users expose weak assumptions. The goal is a structure that explains itself in code and survives change.

Use grid for two dimensions

If rows and columns both matter, grid is usually cleaner than flexbox.

Use gap for gutters

Grid gap handles row and column spacing without margin math.

Use fr for flexible space

Fraction units distribute remaining space cleanly.

Use minmax for resilience

minmax() creates tracks that can shrink and grow.

Avoid fixed column widths first

Fixed grids break faster on mobile.

Think container, not items

The grid container defines the layout system.

Production thinking

Layout quality shows up when content stops being perfect.

Why does this matter?

Grid makes complex layouts readable in code. It turns page structure into a clear system instead of width math.

Accessibility

Grid can visually rearrange items. Preserve meaningful source order unless there is a strong reason.

Production note

Use grid for dashboards, card groups, page shells and galleries. Document repeat/minmax patterns for reuse.

SEO note

Grid keeps semantic HTML independent from layout, which helps maintain clean content structure.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

Change minmax(150px, 1fr) to minmax(240px, 1fr).
Replace auto-fit with exactly 4 columns and think about mobile.
Increase gap and describe how the grid breathes.

Practice assignment

Do this before moving to the next lesson.

Create a grid with repeat(auto-fit, minmax()).
Add at least four cards and a gap.
Explain why this is easier than floats or fixed widths.

HTML CSS

Live preview

Self-check

Before you continue, prove that you understand CSS Grid.