Grid is two-dimensional layout
CSS Grid is the most powerful layout system CSS has. Where Flexbox arranges items in a single direction, Grid works in two dimensions at once — you define columns and rows together and place items into the resulting cells. This makes it the right tool for page-level layout and any component with a genuine grid structure.
Before Grid, two-dimensional layouts required floats, positioning hacks or table markup, all of which were fragile. Grid replaced all of it with a system designed for the purpose.
The fr unit
The most important idea in Grid is the fractional unit, written fr. It represents a fraction of the available space. Setting three columns to 1fr each divides the space into three equal parts; setting them to 2fr 1fr 1fr makes the first column twice as wide as the others.
This is more powerful than percentages because it accounts for gaps automatically. Three columns at 33.3 percent each plus gaps overflow the container, a classic frustration; three columns at 1fr each simply work, because the fr unit distributes what remains after gaps are subtracted. Once you start thinking in fr, a lot of layout maths disappears.
Repeat and responsive grids
Writing 1fr 1fr 1fr 1fr is tedious, so the repeat function shortens it. But repeat combined with two other functions produces something genuinely useful: a grid that responds to its container without any media queries at all.
The minmax function sets a minimum and maximum size for each column. The responsive option here uses it to say each column should be at least 150 pixels but grow to fill available space. Combined with auto-fit or auto-fill, this creates a grid that automatically fits as many columns as will comfortably fit and reflows as the screen changes — a card layout that goes from four columns on desktop to two on tablet to one on mobile, with no breakpoints written by hand. This pattern is one of the most useful things in modern CSS.
Gaps
Grid introduced the gap property, which Flexbox later adopted. It sets consistent spacing between rows and columns cleanly, replacing the old margin-based approaches that always required awkward exceptions for the edges. Row and column gaps can be set independently, which this tool exposes separately.
Grid and Flexbox together
These are not competitors. The common and correct approach is to use Grid for the overall page structure — header, sidebar, main, footer — and Flexbox for the one-dimensional arrangements inside each area, like aligning the items in a navigation bar. Reaching for the two-dimensional tool when you need two dimensions and the one-dimensional tool when you need one keeps layout code simple.
Browser support
Grid is supported by every browser in current use and has been for years. There is no longer any practical reason to avoid it for fear of compatibility, which was a genuine concern only in its early days.
Generated in your browser
The preview updates live as you adjust columns, rows and gaps, so you can see the structure before copying the CSS.
Frequently Asked Questions
What is the fr unit?
A fraction of the available space. Three columns at 1fr each divide the space equally, and it accounts for gaps automatically unlike percentages.
How do I make a responsive grid without media queries?
Use repeat with auto-fit and minmax. This fits as many columns as will comfortably fit and reflows automatically as the screen changes.
When should I use Grid instead of Flexbox?
Grid for two-dimensional layouts controlling rows and columns together. Flexbox for one-dimensional rows or columns. They work well combined.
Why do my percentage columns overflow?
Percentages do not account for gaps, so columns plus gaps exceed the container. The fr unit distributes space after gaps are subtracted, avoiding this.
Is CSS Grid widely supported?
Yes. Every browser in current use has supported it for years, so compatibility is no longer a concern.