Cheatography
https://cheatography.com
A one-page CSS Grid quick reference designed for real-world use. This cheat sheet distills the most commonly used Grid properties, patterns, and alignment rules into a compact, printable format. Ideal for developers who already understand Grid and just need a fast reminder while building layouts.
Enable Grid
display: grid; |
display: inline-grid; |
Grid Units
fr |
Fraction of available space |
px |
Fixed size |
% |
Relative to grid container |
auto |
Size to content |
min-content |
Smallest possible |
max-content |
Largest possible |
minmax(a, b) |
Flexible range |
Define Columns & Rows
grid-template-columns: 200px 1fr 2fr; |
grid-template-rows: auto 1fr auto; |
Common Column/Row Patterns
repeat(3, 1fr) |
repeat(auto-fill, minmax(250px, 1fr)) |
repeat(auto-fit, minmax(250px, 1fr)) |
Common Layout Recipes
Equal Columns |
grid-template-columns: repeat(3, 1fr); |
Responsive Cards |
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
Sticky Footer |
grid-template-rows: auto 1fr auto; |
|
|
Alignment
Align Tracks |
justify-content: start | center | end | space-between | space-around | space-evenly; |
align-content: start | center | end | stretch; |
Align Items |
justify-items: start | center | end | stretch; |
align-items: start | center | end | stretch; |
Alignment (Individual Item) |
justify-self: start | center | end | stretch; |
align-self: start | center | end | stretch; |
Line Numbers & Keywords
grid-column: 1 / -1; |
/* Full Width */ |
grid-row: auto; |
Subgrid (When Supported)
grid-template-columns: subgrid; |
grid-template-rows: subgrid; |
|
|
Named Grid Areas
.header { grid-area: header; } |
.sidebar { grid-area: sidebar; } |
.main { grid-area: main; } |
.footer { grid-area: footer; } |
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
Explicit Placement (Items)
grid-column: 1 / 3; |
grid-row: 2 / 4; |
grid-area: row-start / col-start / row-end / col-end; |
Auto Placement
grid-auto-flow: row; |
grid-auto-flow: column; |
grid-auto-flow: dense; |
grid-auto-rows: 200px; |
grid-auto-columns: 1fr; |
Debugging Tips
outline: 1px solid red;
on grid + items |
grid-column: 1 / -1
is your “nuke it full width” button |
If it is stretching weirdly, check align-items
first |
If it is not wrapping, you probably want auto-fit
or auto-fill
|
Grid defines structure first. Items adapt.
|
Created By
Metadata
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets