CSS Grid Cheatsheet
A quick-reference guide for the CSS Grid Layout, covering grid container (parent) configurations, grid item (child) placements, and common layout patterns.
## Container Properties (Parent)
Initialize a grid layout context by defining `display: grid` or `display: inline-grid`.
```css
.container {
display: grid; /* Initialize a block-level grid container */
/* display: inline-grid; */ /* Initialize an inline-level grid container */
}
```
### 1. Template Columns & Rows
Defines the structure of columns and rows with space-separated sizing lists.
```css
.container {
/* Define 3 columns of 100px, 2fr, and 1fr (fractional units) */
grid-template-columns: 100px 2fr 1fr;
/* Define 2 rows of 50px and auto-height */
grid-template-rows: 50px auto;
/* Repeat Helper: repeat(count, sizing) */
/* grid-template-columns: repeat(3, 1fr); */ /* 3 equal-width columns */
/* Minmax Helper: locks minimum size but expands if space allows */
/* grid-template-columns: repeat(3, minmax(200px, 1fr)); */
}
```
### 2. Template Areas
Provides an intuitive, visual structural map of named grid cells, which child items can bind to.
```css
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
```
### 3. Gaps (Spacing)
Specifies the explicit minimum spacing between grid lines (rows and columns).
```css
.container {
gap: 1.5rem; /* Spacing of 1.5rem between both rows and columns */
/* row-gap: 1rem; */ /* Spacing between rows only */
/* column-gap: 2rem; */ /* Spacing between columns only */
}
```
### 4. Items Alignment (Inside Cells)
Aligns all grid items inside their individual allocated cell boundaries.
```css
.container {
/* Horizontal alignment along inline axis (start, end, center, stretch) */
justify-items: stretch; /* Stretch items to fill full width (default) */
/* Vertical alignment along block axis (start, end, center, stretch) */
align-items: stretch; /* Stretch items to fill full height (default) */
/* Shorthand: place-items: [align-items] [justify-items] */
place-items: center center; /* Perfect alignment in the center of cells */
}
```
### 5. Content Alignment (Entire Grid)
Aligns the entire grid system itself inside the container (only has an effect if the container is larger than the total grid size).
```css
.container {
/* Horizontal alignment (start, end, center, stretch, space-between, space-around, space-evenly) */
justify-content: center;
/* Vertical alignment (start, end, center, stretch, space-between, space-around, space-evenly) */
align-content: center;
/* Shorthand: place-content: [align-content] [justify-content] */
place-content: space-between center;
}
```
### 6. Implicit Grid (Auto sizing)
Controls sizes for rows and columns that are generated implicitly (when there are more items than explicit cells declared).
```css
.container {
grid-auto-rows: 150px; /* Any implicitly created rows will have a height of 150px */
grid-auto-flow: row; /* Flow direction (row, column, or dense auto-fill) */
}
```
---
## Item Properties (Children)
Direct child elements can be positioned precisely across grid lines (which start indexing at 1) or mapped directly to named areas.
```css
/*
Line Index Visual Mapping (for a 3-column grid):
Line 1 Line 2 Line 3 Line 4
| Column 1 | Column 2 | Column 3 |
*/
```
### 1. Line-Based Placements (Columns)
Specifies starting and ending lines for an item's horizontal stretch.
```css
.item-col {
grid-column-start: 1; /* Start at line 1 */
grid-column-end: 3; /* End at line 3 (spans column 1 and 2) */
/* Shorthand: grid-column: [start] / [end] */
/* grid-column: 1 / 3; */
/* Span Shorthand: [start] / span [count] */
/* grid-column: 2 / span 2; */ /* Start at line 2 and span 2 columns */
}
```
### 2. Line-Based Placements (Rows)
Specifies starting and ending lines for an item's vertical stretch.
```css
.item-row {
grid-row-start: 1;
grid-row-end: 4;
/* Shorthand: grid-row: [start] / [end] */
/* grid-row: 1 / 4; */
/* grid-row: 1 / span 3; */
}
```
### 3. Named Area Mapping
Binds a child item directly to a named structural region defined on the parent container.
```css
.header {
grid-area: header; /* Occupies all cells labeled "header" in template-areas */
}
.sidebar {
grid-area: sidebar; /* Occupies all cells labeled "sidebar" */
}
.main-body {
grid-area: main; /* Occupies all cells labeled "main" */
}
```
### 4. Individual Cell Alignment
Overrides the container's `justify-items` and `align-items` for a single grid item.
```css
.item-special {
justify-self: center; /* Horizontal alignment (start, end, center, stretch) */
align-self: end; /* Vertical alignment (start, end, center, stretch) */
/* Shorthand: place-self: [align-self] [justify-self] */
place-self: end center;
}
```
---
## Common Layout Patterns
### 1. Auto-Fit Responsive Grid (The Media-Query-Free Grid)
The ultimate responsive grid pattern. It automatically wraps and shrinks columns based on viewport size, completely eliminating the need for media queries!
```css
.responsive-grid {
display: grid;
/* Create as many columns as fit (auto-fit), with a minimum size of 250px and a max of 1fr */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
```
*Note: `auto-fit` stretches columns to fill empty space. `auto-fill` preserves empty columns without stretching.*
### 2. The Holy Grail Layout (Header, Sidebar, Main, Footer)
A clean, grid-area-based layout template mapping out a standard dashboard or blog structure.
```html
Main Content
```
```css
.app-layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 50px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-body { grid-area: main; }
.footer { grid-area: footer; }
```
### 3. Dynamic Sidebar Layout (Minmax Sidebar)
A sidebar layout where the sidebar never goes below `200px` but shrinks slightly if needed, while the main content takes up all remaining fractional space.
```css
.dashboard {
display: grid;
grid-template-columns: minmax(200px, 300px) 1fr;
gap: 1rem;
}
```
---