📖 Guide

CSS Grid Reference

Complete CSS Grid reference — container properties, item placement, grid functions, and common layout patterns.

88 commands across 11 categories

Container: Display Container: Template Columns & Rows Container: Template Areas Container: Gap Container: Justify & Align Items Container: Justify & Align Content Item: Column & Row Placement Item: Grid Area Item: Justify & Align Self Grid Functions Common Layouts

Container: Display

Command	Description
`display: grid`	Create a block-level grid container
`display: inline-grid`	Create an inline-level grid container

Container: Template Columns & Rows

Command	Description
`grid-template-columns: 200px 1fr 200px`	Three columns: fixed, flexible, fixed
`grid-template-columns: 1fr 1fr 1fr`	Three equal-width columns
`grid-template-columns: repeat(3, 1fr)`	Three equal columns using repeat()
`grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))`	Responsive grid — as many 250px+ columns as fit
`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`	Like auto-fill but stretches items to fill remaining space
`grid-template-columns: minmax(200px, 300px) 1fr`	First column between 200–300px, second takes rest
`grid-template-columns: fit-content(300px) 1fr`	First column shrinks to content up to 300px max
`grid-template-columns: [start] 1fr [mid] 2fr [end]`	Named grid lines
`grid-template-rows: 60px 1fr 40px`	Three rows: header, flexible main, footer
`grid-template-rows: auto 1fr auto`	Rows sized by content with flexible middle
`grid-template-rows: repeat(3, minmax(100px, auto))`	Three rows, minimum 100px, grow with content
`grid-auto-rows: minmax(100px, auto)`	Set size for implicitly created rows
`grid-auto-columns: 200px`	Set size for implicitly created columns
`grid-auto-flow: row`	Place items by filling rows first (default)
`grid-auto-flow: column`	Place items by filling columns first
`grid-auto-flow: dense`	Fill gaps by rearranging items (may change visual order)

Container: Template Areas

Command	Description
`grid-template-areas: "header header header" "sidebar main main" "footer footer footer"`	Define named grid areas — each string is a row
`grid-template-areas: "nav nav" ". content" "footer footer"`	Use . for empty cells
`grid-template: "header header" 60px "sidebar main" 1fr "footer footer" 40px / 200px 1fr`	Shorthand: areas, row sizes, and column sizes together

Container: Gap

Command	Description
`gap: 16px`	Equal row and column gap
`gap: 16px 24px`	Row gap 16px, column gap 24px
`row-gap: 16px`	Gap between rows only
`column-gap: 24px`	Gap between columns only
`gap: 1rem`	Gap using relative units

Container: Justify & Align Items

Command	Description
`justify-items: stretch`	Stretch items to fill their cell width (default)
`justify-items: start`	Align items to the start of their cell (inline axis)
`justify-items: end`	Align items to the end of their cell
`justify-items: center`	Center items horizontally in their cell
`align-items: stretch`	Stretch items to fill their cell height (default)
`align-items: start`	Align items to the top of their cell
`align-items: end`	Align items to the bottom of their cell
`align-items: center`	Center items vertically in their cell
`place-items: center`	Shorthand: center both horizontally and vertically
`place-items: start end`	Shorthand: align-items start, justify-items end

Container: Justify & Align Content

Command	Description
`justify-content: start`	Pack grid at the start of the inline axis
`justify-content: end`	Pack grid at the end of the inline axis
`justify-content: center`	Center grid horizontally in container
`justify-content: space-between`	Equal space between columns, none at edges
`justify-content: space-around`	Equal space around columns
`justify-content: space-evenly`	Equal space between and around columns
`align-content: start`	Pack grid at the top of container
`align-content: end`	Pack grid at the bottom of container
`align-content: center`	Center grid vertically in container
`align-content: space-between`	Equal space between rows
`place-content: center`	Shorthand: center grid both ways

Item: Column & Row Placement

Command	Description
`grid-column: 1 / 3`	Span from column line 1 to line 3 (2 columns)
`grid-column: 1 / -1`	Span all columns (start to end)
`grid-column: span 2`	Span 2 columns from auto-placed position
`grid-column-start: 2`	Start at column line 2
`grid-column-end: 4`	End at column line 4
`grid-row: 1 / 3`	Span from row line 1 to line 3 (2 rows)
`grid-row: 1 / -1`	Span all rows
`grid-row: span 3`	Span 3 rows
`grid-row-start: 2`	Start at row line 2
`grid-row-end: 5`	End at row line 5

Item: Grid Area

Command	Description
`grid-area: header`	Place item in the named area 'header'
`grid-area: sidebar`	Place item in the named area 'sidebar'
`grid-area: 1 / 1 / 3 / 3`	Shorthand: row-start / col-start / row-end / col-end
`grid-area: span 2 / span 3`	Span 2 rows and 3 columns

Item: Justify & Align Self

Command	Description
`justify-self: start`	Align this item to cell start (inline axis)
`justify-self: end`	Align this item to cell end
`justify-self: center`	Center this item horizontally in its cell
`justify-self: stretch`	Stretch this item to fill cell width
`align-self: start`	Align this item to cell top
`align-self: end`	Align this item to cell bottom
`align-self: center`	Center this item vertically in its cell
`align-self: stretch`	Stretch this item to fill cell height
`place-self: center`	Shorthand: center both ways
`place-self: end start`	Shorthand: align-self end, justify-self start

Grid Functions

Command	Description
`repeat(3, 1fr)`	Repeat a track pattern 3 times
`repeat(auto-fill, 200px)`	Fill container with as many 200px tracks as fit
`repeat(auto-fit, minmax(200px, 1fr))`	Auto-fit: like auto-fill but collapses empty tracks
`repeat(2, 1fr 2fr)`	Repeat a pattern: 1fr 2fr 1fr 2fr
`minmax(100px, 1fr)`	Track at least 100px, grows to fill space
`minmax(auto, 300px)`	Track sized by content up to 300px max
`minmax(0, 1fr)`	Flexible track that can shrink to 0
`1fr`	Fractional unit — share of remaining space
`fit-content(300px)`	Size by content, up to 300px maximum

Common Layouts

Command	Description
`display: grid; place-items: center; min-height: 100vh`	Center anything on the page
`display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem`	Responsive card grid — no media queries needed
`display: grid; grid-template: "header" auto "main" 1fr "footer" auto / 1fr; min-height: 100vh`	Holy grail: header, stretchy main, footer
`display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer"`	Classic sidebar layout with named areas
`display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem`	12-column grid system (like Bootstrap)
`display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 1fr; gap: 1rem`	Image gallery with equal-height cells
`display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-auto-flow: dense`	Masonry-like layout with dense packing
`display: grid; grid-template-columns: 1fr min(65ch, 100%) 1fr; /* children */ grid-column: 2`	Content with max-width centered (no margin: auto needed)

More Guides

Complete Git command reference — from basics to advanced workflows. Searchable, with examples.

Complete Vim/Vi command reference — modes, motions, editing, search, and advanced features.

Docker Commands

Complete Docker & Docker Compose command reference — containers, images, volumes, networks, and orchestration.

Regex Reference

Complete regular expression reference — syntax, patterns, quantifiers, groups, lookaheads, and common recipes.

Complete Linux/Bash command reference — file management, text processing, networking, system admin, and shell scripting.

Kubernetes Commands

Complete Kubernetes & kubectl command reference — pods, deployments, services, configmaps, and cluster management.

Python Reference

Complete Python reference — syntax, data structures, string methods, file I/O, comprehensions, and common patterns.

Complete SQL reference — queries, joins, aggregation, subqueries, indexes, and database management.

Nginx Reference

Complete Nginx configuration reference — server blocks, locations, proxying, SSL, load balancing, and caching.

Complete SSH reference — connections, key management, tunneling, config, SCP/SFTP, and security hardening.

Jenkins Reference

Complete Jenkins reference — pipeline syntax, Jenkinsfile, plugins, CLI, agents, and CI/CD patterns.

HTTP Headers Reference

Complete HTTP headers reference — request headers, response headers, caching, security, CORS, and content negotiation. Searchable, with examples.

PostgreSQL Reference

Comprehensive PostgreSQL reference — from connection basics to advanced features like JSONB, full-text search, window functions, and performance tuning.

Async Patterns Reference

Multi-language async/concurrency patterns — JavaScript, Python, Go, Rust, Java, and universal concurrency patterns.

Protobuf & gRPC Reference

Comprehensive reference for Protocol Buffers (proto3) and gRPC — message definitions, services, streaming, and common patterns.

JS Array Methods

Complete JavaScript Array methods reference — creating, searching, transforming, sorting, iterating, and common patterns. Searchable, with examples.

Tailwind CSS Reference

Complete Tailwind CSS reference — layout, spacing, typography, colors, responsive design, states, and common patterns. Searchable, with examples.

GraphQL Reference

Complete GraphQL reference — schema definition, types, queries, mutations, directives, fragments, and common patterns. Searchable, with examples.

VS Code Shortcuts

Complete VS Code keyboard shortcuts — editing, navigation, search, multi-cursor, terminal, debug, and more. Searchable, with Cmd/Ctrl notation.

CSS Flexbox Reference

Complete CSS Flexbox reference — container properties, item properties, and common layout patterns. Searchable, with examples.

React Hooks Reference

Complete React Hooks reference — useState, useEffect, useContext, custom hooks, and common patterns. Searchable, with examples.

TypeScript Reference

Complete TypeScript reference — types, interfaces, generics, utility types, and advanced patterns. Searchable, with examples.

AWS CLI Reference

Complete AWS CLI reference — EC2, S3, IAM, Lambda, ECS, RDS, CloudFormation, and common operations.

Complete Go (Golang) reference — syntax, types, functions, concurrency, error handling, and common patterns.

PowerShell Reference

Complete PowerShell reference — cmdlets, pipelines, scripting, file operations, remote management, and Active Directory.

Complete Redis command reference — strings, hashes, lists, sets, sorted sets, pub/sub, transactions, and server management.

Terraform Commands

Complete Terraform reference — init, plan, apply, state management, modules, workspaces, and HCL syntax.

Ansible Commands

Complete Ansible reference — playbooks, modules, inventory, roles, vault, and ad-hoc commands.

📖 Free, searchable command reference. Bookmark this page for quick access.