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
Use Cases
Frequently Asked Questions
From the Blog
Learn CSS Through Photography: Build a Portfolio Gallery
Photography gives you an immediate visual feedback loop for CSS: change a grid column and you see it update. This project builds a professional photo portfolio — masonry layout, hover overlays, lightbox, and responsive grid — teaching CSS Grid, Flexbox, transitions, and media queries along the way.
Read More AI & TechnologyWhat Is Bootstrap? The Beginner's Guide to the CSS Framework
Bootstrap is a free, open-source CSS framework that provides pre-built layout and component styles so developers can build responsive websites quickly. This guide covers its grid system, components, and setup.
Read More AI & TechnologyWhat Is a Heat Map? Reading Data Through Color
A heat map is a data visualization that uses color intensity to represent values across a grid, making patterns and outliers easy to spot at a glance. This guide explains how heat maps work, common types, and how to read them correctly.
Read More Data ScienceHow to write a retention cohort query in SQL that survives review
Build a retention cohort in four layers: first event per user, a period index from date arithmetic, active-period facts, then the cohort-by-period grid. Most broken cohort charts come from partial trailing periods read as decline, time-zone boundaries misassigning users, and cohort dates recomputed on every run.
Read More