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.
|
display: grid;
|
|
display: inline-grid;
|
|
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
|
|
grid-template-columns: 200px 1fr 2fr;
|
|
|
grid-template-rows: auto 1fr auto;
|
|
repeat(3, 1fr)
|
|
|
repeat(auto-fill, minmax(250px, 1fr))
|
|
|
repeat(auto-fit, minmax(250px, 1fr))
|
|
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;
|
|
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;
|
|
grid-column: 1 / -1;
|
/* Full Width */
|
|
grid-row: auto;
|
|
|
grid-template-columns: subgrid;
|
|
|
grid-template-rows: subgrid;
|
|
.header { grid-area: header; }
|
|
.sidebar { grid-area: sidebar; }
|
|
.main { grid-area: main; }
|
|
.footer { grid-area: footer; }
|
|
grid-column: 1 / 3;
|
|
|
grid-row: 2 / 4;
|
|
|
grid-area: row-start / col-start / row-end / col-end;
|
|
grid-auto-flow: row;
|
|
|
grid-auto-flow: column;
|
|
|
grid-auto-flow: dense;
|
|
|
grid-auto-rows: 200px;
|
|
|
grid-auto-columns: 1fr;
|
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 |
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
