CSS Grid Cheat Sheet

Container Properties

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px auto;
gap: 20px;
grid-auto-flow: row;

Item Properties

grid-column: 1 / 3;
grid-row: 1 / 2;
grid-area: header;

Common Patterns

/* Equal columns */
grid-template-columns: repeat(3, 1fr);

/* Responsive grid */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

/* Named areas */
grid-template-areas: "header header" "sidebar main" "footer footer";