CSS Grid is a layout module enabled with display: grid that divides a container into rows and columns and lets items be placed in the resulting cells or areas. It handles both dimensions at once.
Why it matters
Grid replaces the float and table layouts used for decades. It lets a page change layout by editing a few CSS lines, without changing the HTML order, and responsive card galleries need no media queries when you use auto-fill with a minimum column width. Browser support is universal in current browsers.
Example
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}This creates as many columns of at least 220px as fit the container, and they stretch evenly. On a phone you get one column; on a wide monitor, five or six.
Common mistakes
- Using grid for a simple row of items where flexbox is lighter.
- Reordering items visually with grid while leaving a different DOM order, which confuses keyboard and screen reader users.
- Hard-coding pixel column widths that overflow small screens.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.