How do I create a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This creates as many columns as will fit, each at least 250px wide, expanding equally to fill space. Items wrap to new rows automatically.

What is the difference between auto-fit and auto-fill?

auto-fit collapses empty tracks, allowing items to stretch. auto-fill keeps empty tracks, maintaining the grid structure even with fewer items. Use auto-fit for most responsive layouts.

What does fr mean in CSS Grid?

fr stands for "fraction of available space." 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the others. It is similar to flex-grow but for grid track sizing.

Last updated: April 12, 2026

CSS Grid Cheatsheet

Quick Answer

CSS Grid is a 2D layout system. Set display: grid and define columns with grid-template-columns. Use auto-fit with minmax() for responsive grids without media queries. This cheatsheet covers all essential Grid properties.

Container

Command	Description
display: grid	Create a grid container
grid-template-columns: 1fr 1fr 1fr	Define 3 equal-width columns
grid-template-columns: repeat(3, 1fr)	Shorthand for repeating column definitions
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))	Responsive columns that auto-wrap
grid-template-columns: 200px 1fr 200px	Fixed sidebars with flexible center
grid-template-rows: auto 1fr auto	Header/footer with flexible main content
gap: 1rem	Set gap between grid cells `gap: 1rem or row-gap: 1rem; column-gap: 2rem`
grid-template-areas: "header header" "sidebar main"	Define named grid areas for placement
justify-items: center	Align items horizontally within their grid cell
align-items: center	Align items vertically within their grid cell
place-items: center	Shorthand for align-items + justify-items
justify-content: center	Align the entire grid horizontally within the container
grid-auto-rows: minmax(100px, auto)	Set size for implicitly created rows

Items

Command	Description
grid-column: 1 / 3	Span item across columns 1 and 2
grid-column: span 2	Make item span 2 columns
grid-row: 1 / 3	Span item across rows 1 and 2
grid-area: header	Place item in a named grid area
justify-self: end	Align a single item horizontally within its cell
align-self: end	Align a single item vertically within its cell
place-self: center	Center a single item within its grid cell

Frequently Asked Questions

More Cheatsheets

Git Commands Cheatsheet

This cheatsheet covers the 40 most essential Git commands grouped by workflow: setup, staging, branc...

Docker Commands Cheatsheet

This cheatsheet covers 35 essential Docker commands for managing containers, images, volumes, and ne...

Linux Commands Cheatsheet

This cheatsheet covers 40 essential Linux/Unix commands for daily development: file navigation, text...

HTTP Status Codes Cheatsheet

HTTP status codes are 3-digit numbers returned by servers. 1xx = informational, 2xx = success, 3xx =...