Published: June 2026•By Web Util Slyce Team•8 min read

CSS Grid — Complete Reference

A complete guide to CSS Grid Layout. Generate grids visually with our CSS Grid Generator.

Grid Container Properties

Property	Example Values	Description
display	grid, inline-grid	Defines a grid container
grid-template-columns	1fr 1fr 1fr, repeat(3, 1fr), 200px auto 100px	Defines column sizes
grid-template-rows	100px auto 100px, repeat(2, 1fr)	Defines row sizes
grid-template-areas	"header header" "nav main" "footer footer"	Defines named grid areas
gap (grid-gap)	10px, 1rem	Shorthand for row-gap and column-gap
justify-items	stretch, start, end, center	Aligns items along the row axis
align-items	stretch, start, end, center	Aligns items along the column axis
grid-auto-flow	row, column, dense	Controls auto-placement algorithm

Property	Example Values	Description
grid-column	1 / 3, span 2, 1 / -1	Shorthand for column start / end
grid-row	1 / 3, span 2, 1 / -1	Shorthand for row start / end
grid-area	header, 1 / 1 / 3 / 3	Assigns to named area or specifies grid lines
justify-self	stretch, start, end, center	Overrides justify-items for this item
align-self	stretch, start, end, center	Overrides align-items for this item

grid-template-columns: 1fr 1fr 1fr;

Three columns that each take up one fraction of available space

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

Automatically fits as many columns as possible, minimum 250px

grid-template-columns: 250px 1fr;

Fixed-width sidebar with a content area that fills remaining space

grid-template-areas: "header header" "nav main" "aside main" "footer footer";

Named areas layout with header, nav, main content, aside, and footer

grid-auto-flow: dense; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Fills gaps automatically with dense packing