CSS Grid Layout Tutorial With Examples for Modern Websites

CSS Grid is made for rows and columns

CSS Grid lets you create two-dimensional layouts directly in CSS. Instead of relying on floats, table-like hacks, or many wrappers, you define rows, columns, gaps, and placement rules. This makes Grid especially useful for page shells, dashboards, galleries, pricing tables, forms, editorial layouts, and any interface where alignment across both rows and columns matters.

A grid container uses display: grid. You can define columns with grid-template-columns, rows with grid-template-rows, and spacing with gap. Items can flow automatically or be placed intentionally. The power comes from describing layout structure instead of forcing elements into shape with fragile widths.

Start with practical track definitions

The fr unit represents a share of available space. A layout with grid-template-columns: 250px 1fr creates a fixed sidebar and flexible main area. A gallery can use repeat(auto-fit, minmax(220px, 1fr)) so cards form as many columns as fit and collapse gracefully on smaller screens.

Named template areas can make page layouts readable. A page might define areas for header, sidebar, main, and footer. This is helpful when the same structure changes between desktop and mobile. The CSS can show the layout map more clearly than a pile of nested wrappers.

• Use gap for consistent spacing between grid items.
• Use minmax to prevent columns from becoming too narrow.
• Use template areas for clear page-level regions.
• Use Flexbox inside grid items when internal alignment is one-dimensional.

Grid helps responsive design

Responsive Grid layouts can adapt without many breakpoints. Auto-fit and minmax can handle galleries, card lists, and feature grids elegantly. For larger page shells, media queries can change the grid template from multiple columns to one column. This keeps the layout understandable across screen sizes.

Be careful with fixed widths. A grid that looks good on a wide monitor may overflow on mobile if columns cannot shrink. Use responsive constraints and test with real content, longer labels, and translated text. Grid gives structure, but content still needs room to breathe.

Use placement deliberately

Grid lets items span columns and rows, but heavy manual placement can become hard to maintain. Use explicit placement for meaningful layout decisions, not for every tiny adjustment. If a design needs many one-off placements, consider whether the layout system or component design is too complex.

CSS Grid is one of the clearest tools for modern web layout. Use it when structure matters, pair it with Flexbox for component interiors, and keep track definitions readable enough that future changes are safe.

Keep grid names meaningful

Named areas and line names are most helpful when they describe product structure. Names such as header, sidebar, content, filters, and summary communicate intent better than vague names such as left or box1. Clear names make responsive changes easier because the CSS reads like a layout map instead of a collection of coordinates.