CSS Grid
CSS Grid is a two-dimensional layout system in CSS that lets developers arrange content into rows and columns simultaneously, using a defined grid template rather than nested boxes or floats.
Definition
CSS Grid is a two-dimensional layout system in CSS that lets developers arrange content into rows and columns simultaneously, using a defined grid template rather than nested boxes or floats.
Overview
Before CSS Grid, building complex page layouts meant relying on floats, tables, or careful combinations of positioning hacks to approximate a grid — none of which were designed for the job. CSS Grid, which reached broad browser support around 2017, is purpose-built for two-dimensional layout: a parent element becomes a grid container, its children become grid items, and a small set of properties (`grid-template-columns`, `grid-template-rows`, `grid-template-areas`, `gap`) define exactly how those items are placed across both axes at once. Grid is often used alongside Flexbox rather than instead of it — the general guidance is Grid for overall page or component layout where content needs to align in two dimensions, and Flexbox for one-dimensional arrangement within a grid area, like aligning items in a navigation bar or a row of buttons. Named grid areas (`grid-template-areas`) let developers describe a layout almost visually in CSS, then reorder or restructure it entirely at different breakpoints using media queries, without touching the underlying HTML — a significant improvement for building responsive web design. Because Grid handles gaps, alignment, and implicit row/column creation natively, it eliminated many of the margin-collapsing and clearfix hacks layouts previously required, and it's now the standard approach for page-level and dashboard-style layouts across virtually all modern browsers, including in frameworks like Tailwind CSS which exposes Grid through its own utility classes.
Key Concepts
- True two-dimensional layout across rows and columns simultaneously
- Named grid areas for visually describing layouts in CSS
- Built-in gap property, removing the need for margin hacks
- Responsive layout changes via media queries without changing HTML
- Implicit grid creation for content that doesn't fit the explicit template
- Complements Flexbox for one-dimensional alignment within grid areas