Cheat sheetCSS
CSS Grid
Two-dimensional layout: tracks, areas, fr units, and auto-fit patterns.
Basic grid
css
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem 1.5rem; /* row column */
align-items: start;
justify-items: stretch;
}fr and minmax
css
/* Three equal columns */
.cols { grid-template-columns: repeat(3, 1fr); }
/* Responsive cards without media queries */
.auto {
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}Areas
css
.page {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 12rem 1fr;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }Placement
css
.span {
grid-column: 1 / 3; /* start line / end line */
grid-row: span 2;
}Interview tips
- ✓auto-fit vs auto-fill: fit collapses empty tracks; fill keeps them.
- ✓1fr is “share free space” after fixed/minmax tracks resolve.
- ✓Grid + flex on children is a normal, good answer.
Common mistakes
- !Using percentages when minmax(0, 1fr) is needed to allow shrinking.
- !Over-using absolute placement instead of flow.
- !Forgetting gap when spacing tracks.