CSS Grid Guide
A complete reference for CSS Grid Layout with properties, values, and practical examples. Master responsive layouts without media queries.
Container Properties
Properties applied to the grid container (parent element).
display: grid
.container {
display: grid; /* or inline-grid */
}Defines an element as a grid container and establishes a new grid formatting context.
grid-template-columns
.container {
/* Fixed width columns */
grid-template-columns: 200px 200px 200px;
/* Flexible columns */
grid-template-columns: 1fr 2fr 1fr;
/* Mixed units */
grid-template-columns: 200px 1fr auto;
/* Repeat notation */
grid-template-columns: repeat(3, 1fr);
/* Auto-fill - as many as fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Auto-fit - expands items to fill space */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}Try it: grid-template-columns
1
2
3
4
grid-template-rows
.container {
/* Fixed height rows */
grid-template-rows: 100px 200px;
/* Flexible rows */
grid-template-rows: 1fr 2fr;
/* Mix with minmax */
grid-template-rows: minmax(100px, auto) 1fr;
}grid-template-areas
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Header
Sidebar
Main
Footer
gap (grid-gap)
.container {
/* Both row and column gap */
gap: 20px;
/* Row gap, column gap */
gap: 20px 40px;
/* Individual properties */
row-gap: 20px;
column-gap: 40px;
}Try it: gap
1
2
3
4
5
6
grid-auto-columns / grid-auto-rows
.container {
/* Size of implicitly created columns */
grid-auto-columns: 200px;
/* Size of implicitly created rows */
grid-auto-rows: minmax(100px, auto);
}grid-auto-flow
.container {
grid-auto-flow: row; /* default */
grid-auto-flow: column;
grid-auto-flow: dense; /* fill holes */
grid-auto-flow: row dense;
}Item Properties
Properties applied to grid items (child elements).
grid-column / grid-row
.item {
/* Start and end lines */
grid-column: 1 / 3; /* spans columns 1-3 */
grid-row: 1 / 3; /* spans rows 1-3 */
/* Span notation */
grid-column: span 2; /* spans 2 columns */
grid-row: span 3; /* spans 3 rows */
/* Individual properties */
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
/* Span to end */
grid-column: 1 / -1; /* spans all columns */
}grid-area
.item {
/* Shorthand: row-start / col-start / row-end / col-end */
grid-area: 1 / 1 / 3 / 3;
/* Or reference a named area */
grid-area: header;
}justify-self
.item {
justify-self: start; /* align to start */
justify-self: end; /* align to end */
justify-self: center; /* center horizontally */
justify-self: stretch; /* fill width (default) */
}align-self
.item {
align-self: start; /* align to top */
align-self: end; /* align to bottom */
align-self: center; /* center vertically */
align-self: stretch; /* fill height (default) */
}place-self
.item {
/* Shorthand for align-self / justify-self */
place-self: center;
place-self: start end;
}Sizing Functions
fr (fraction unit)
Distributes available space as fractions
grid-template-columns: 1fr 2fr 1fr;
minmax(min, max)
Defines a size range for a track
grid-template-columns: minmax(200px, 1fr);
fit-content(limit)
Uses content size, capped at limit
grid-template-columns: fit-content(300px);
min-content
Minimum size without overflow
grid-template-columns: min-content 1fr;
max-content
Maximum size based on content
grid-template-columns: max-content 1fr;
auto
Behaves like minmax(min-content, max-content)
grid-template-columns: auto 1fr auto;
Alignment
Control alignment of items and tracks within the grid.
justify-items
.container {
justify-items: start; /* align to start (left) */
justify-items: end; /* align to end (right) */
justify-items: center; /* center horizontally */
justify-items: stretch; /* fill width (default) */
}Try it: justify-items
1
2
3
align-items
.container {
align-items: start; /* align to top */
align-items: end; /* align to bottom */
align-items: center; /* center vertically */
align-items: stretch; /* fill height (default) */
}Try it: align-items
1
2
3
| Property | Applies To | Values | Description |
|---|---|---|---|
justify-items |
Container | start | end | center | stretch | Aligns items horizontally within their cells |
align-items |
Container | start | end | center | stretch | Aligns items vertically within their cells |
place-items |
Container | align-items / justify-items | Shorthand for both alignments |
justify-content |
Container | start | end | center | stretch | space-between | space-around | space-evenly | Aligns the grid horizontally within the container |
align-content |
Container | start | end | center | stretch | space-between | space-around | space-evenly | Aligns the grid vertically within the container |
place-content |
Container | align-content / justify-content | Shorthand for grid alignment |
Common Patterns
Holy Grail Layout
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-column: 1 / -1; }
.footer { grid-column: 1 / -1; }Holy Grail Layout
Header
Left
Main
Right
Footer
Responsive Card Grid (No Media Queries)
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
/* Cards automatically wrap and fill space */Card 1
Card 2
Card 3
Card 4
Centered Layout
.container {
display: grid;
place-items: center;
min-height: 100vh;
}
/* Perfect centering with one line */Centered Layout
Centered Content
12-Column Layout System
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.span-6 { grid-column: span 6; } /* Half width */
.span-4 { grid-column: span 4; } /* Third width */
.span-3 { grid-column: span 3; } /* Quarter width */span 12
span 6
span 6
span 4
span 4
span 4
span 3
span 3
span 3
span 3
Asymmetric Layout
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-auto-rows: minmax(200px, auto);
gap: 2rem;
}
.featured {
grid-column: 1 / -1;
grid-row: span 2;
}Featured (spans all columns)
Main (2fr)
Sidebar (1fr)
Content
Widget
Masonry-Like Layout (CSS Grid)
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 10px;
gap: 1rem;
}
.item {
/* Use JavaScript to calculate span based on content height */
/* or use CSS grid-row: span X; */
}Note: True masonry layout is coming to CSS Grid with grid-template-rows: masonry; but browser support is limited. For now, use JavaScript to calculate row spans or consider CSS Multi-column Layout.
Responsive Grids
Auto-Fit vs Auto-Fill
/* auto-fill: creates empty columns to fill space */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* auto-fit: collapses empty columns, items expand */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));auto-fill (maintains empty columns)
Item 1
Item 2
auto-fit (items expand to fill)
Item 1
Item 2
Tip: Use auto-fit for fewer items that should expand. Use auto-fill to maintain consistent column sizes.
Responsive with Media Queries
.container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}Container Query Grids
.wrapper {
container-type: inline-size;
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@container (min-width: 600px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@container (min-width: 900px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}Container queries allow grids to respond to their container size rather than viewport size.