CSS Grid is a two-dimensional layout system that lets you define both rows and columns. Unlike Flexbox (one-dimensional), Grid controls layout in both directions simultaneously.

What does 1fr mean in CSS Grid?

fr stands for fraction. 1fr means one fraction of the available space. grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first.

How do I make a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). Items are at least 280px wide and automatically reflow as the container size changes.

How to Use CSS Grid: A Practical Layout Guide

🔲

Try Grid Generator

Free, no signup →