---
title: "CSS Grid Cheatsheet | FindUtils"
description: "Grid container and item properties, template areas, auto-placement, and responsive grids"
url: https://findutils.com/cheatsheets/css-grid/
---

# CSS Grid Cheatsheet

Grid container and item properties, template areas, auto-placement, and responsive grids 36 commands in 7 sections, filed under [Web Development](https://findutils.com/cheatsheets/web/).

## Container Properties

- `display: grid`: Enable grid layout on container
- `display: inline-grid`: Inline-level grid container
- `grid-template-columns: 1fr 2fr 1fr`: Define column sizes (fractional)
- `grid-template-columns: repeat(3, 1fr)`: Repeat: 3 equal columns
- `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))`: Responsive auto-fill columns
- `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`: Auto-fit (stretch to fill)
- `grid-template-rows: 100px auto 1fr`: Define row sizes
- `grid-auto-rows: minmax(100px, auto)`: Default height for implicit rows

## Template Areas

- `grid-template-areas: "header header" "sidebar main" "footer footer"`: Define named areas
- `grid-area: header`: Place item in named area
- `grid-area: . (dot)`: Empty cell in template

## Gap & Alignment

- `gap: 16px`: Equal row and column gap
- `gap: 16px 24px`: Row gap, column gap
- `justify-items: start | center | end | stretch`: Align items along row axis
- `align-items: start | center | end | stretch`: Align items along column axis
- `place-items: center`: Shorthand for align-items + justify-items
- `justify-content: center | space-between`: Align grid within container (row)
- `align-content: center | space-between`: Align grid within container (column)

## Item Placement

- `grid-column: 1 / 3`: Span from column line 1 to 3
- `grid-column: 1 / -1`: Span full width
- `grid-column: span 2`: Span 2 columns from auto position
- `grid-row: 1 / 3`: Span from row line 1 to 3
- `grid-row: span 2`: Span 2 rows
- `grid-area: 1 / 1 / 3 / 3`: Shorthand: row-start / col-start / row-end / col-end

## Item Self-Alignment

- `justify-self: start | center | end | stretch`: Align item along row axis
- `align-self: start | center | end | stretch`: Align item along column axis
- `place-self: center`: Shorthand for align-self + justify-self
- `order: -1`: Change visual order
- `z-index: 1`: Stack order for overlapping items

## Sizing Functions

- `1fr`: One fraction of available space
- `minmax(200px, 1fr)`: Min 200px, max 1fr
- `min-content`: Size to minimum content width
- `max-content`: Size to maximum content width
- `fit-content(300px)`: Like max-content but capped at 300px
- `auto`: Size based on content and available space

## Sources

- `https://www.w3.org/TR/css-grid-2/`: W3C Grid specification: tracks, areas, placement, and alignment.

## Related

- Cheatsheet: [React Hooks](https://findutils.com/cheatsheets/react-hooks/)
- Cheatsheet: [CSS Flexbox](https://findutils.com/cheatsheets/css-flexbox/)
- Cheatsheet: [HTTP Status Codes](https://findutils.com/cheatsheets/http-status-codes/)
- Guide: [How to Extract a Color Palette From an Image](https://findutils.com/guides/image-color-extractor-guide/)
- Guide: [How to Build a Custom CSS Easing Curve](https://findutils.com/guides/cubic-bezier-generator-guide/)
- Guide: [How to Use CSS Border Radius Properly](https://findutils.com/guides/border-radius-generator-guide/)
- Tool: [CSS Animation Generator](https://findutils.com/design/css-animation-generator/)
- Tool: [CSS Minifier](https://findutils.com/developers/css-minifier/)