CSS Grid is a powerful two-dimensional layout system for creating complex grid-based designs. Here's how to use it.
Basic Grid#
1/* Create a grid container */
2.grid {
3 display: grid;
4 grid-template-columns: 1fr 1fr 1fr;
5 grid-template-rows: auto auto;
6 gap: 20px;
7}
8
9/* Three equal columns */
10.three-columns {
11 display: grid;
12 grid-template-columns: repeat(3, 1fr);
13 gap: 1rem;
14}
15
16/* Fixed and flexible columns */
17.mixed {
18 display: grid;
19 grid-template-columns: 200px 1fr 100px;
20 gap: 1rem;
21}Grid Template Areas#
1.layout {
2 display: grid;
3 grid-template-areas:
4 "header header header"
5 "sidebar main main"
6 "footer footer footer";
7 grid-template-columns: 200px 1fr 1fr;
8 grid-template-rows: auto 1fr auto;
9 gap: 1rem;
10 min-height: 100vh;
11}
12
13.header { grid-area: header; }
14.sidebar { grid-area: sidebar; }
15.main { grid-area: main; }
16.footer { grid-area: footer; }Responsive Grid#
1/* Auto-fit: stretch items to fill */
2.auto-fit {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
5 gap: 1rem;
6}
7
8/* Auto-fill: create empty tracks */
9.auto-fill {
10 display: grid;
11 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
12 gap: 1rem;
13}
14
15/* Media query approach */
16.responsive {
17 display: grid;
18 grid-template-columns: 1fr;
19 gap: 1rem;
20}
21
22@media (min-width: 640px) {
23 .responsive {
24 grid-template-columns: repeat(2, 1fr);
25 }
26}
27
28@media (min-width: 1024px) {
29 .responsive {
30 grid-template-columns: repeat(4, 1fr);
31 }
32}Gap (Gutters)#
1.grid {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4
5 /* Same gap for rows and columns */
6 gap: 20px;
7
8 /* Different row and column gaps */
9 gap: 20px 10px; /* row column */
10
11 /* Individual properties */
12 row-gap: 20px;
13 column-gap: 10px;
14}Alignment#
1/* Container alignment */
2.container {
3 display: grid;
4 grid-template-columns: repeat(3, 100px);
5
6 /* Align all items horizontally */
7 justify-items: start | end | center | stretch;
8
9 /* Align all items vertically */
10 align-items: start | end | center | stretch;
11
12 /* Shorthand */
13 place-items: center; /* align-items justify-items */
14
15 /* Align grid within container */
16 justify-content: start | end | center | space-between | space-around | space-evenly;
17 align-content: start | end | center | space-between | space-around | space-evenly;
18
19 /* Shorthand */
20 place-content: center;
21}
22
23/* Individual item alignment */
24.item {
25 justify-self: start | end | center | stretch;
26 align-self: start | end | center | stretch;
27 place-self: center;
28}Spanning Items#
1.grid {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr);
4 gap: 1rem;
5}
6
7/* Span columns */
8.wide {
9 grid-column: span 2;
10}
11
12/* Span rows */
13.tall {
14 grid-row: span 2;
15}
16
17/* Span both */
18.featured {
19 grid-column: span 2;
20 grid-row: span 2;
21}
22
23/* Explicit placement */
24.item {
25 grid-column: 1 / 3; /* start / end */
26 grid-row: 1 / 2;
27}
28
29/* Using line names */
30.item {
31 grid-column: col-start / col-end;
32}Named Lines#
1.grid {
2 display: grid;
3 grid-template-columns:
4 [sidebar-start] 200px
5 [sidebar-end main-start] 1fr
6 [main-end];
7 grid-template-rows:
8 [header-start] auto
9 [header-end content-start] 1fr
10 [content-end footer-start] auto
11 [footer-end];
12}
13
14.sidebar {
15 grid-column: sidebar-start / sidebar-end;
16 grid-row: content-start / content-end;
17}
18
19.main {
20 grid-column: main-start / main-end;
21 grid-row: content-start / content-end;
22}Implicit Grid#
1.grid {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4
5 /* Size of auto-created rows */
6 grid-auto-rows: 100px;
7
8 /* Or use minmax for flexibility */
9 grid-auto-rows: minmax(100px, auto);
10
11 /* Direction of auto-placed items */
12 grid-auto-flow: row; /* default */
13 grid-auto-flow: column;
14 grid-auto-flow: dense; /* fill holes */
15}Card Grid#
1.card-grid {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
4 gap: 1.5rem;
5 padding: 1.5rem;
6}
7
8.card {
9 display: grid;
10 grid-template-rows: 200px 1fr auto;
11 border-radius: 8px;
12 overflow: hidden;
13 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
14}
15
16.card-image {
17 object-fit: cover;
18 width: 100%;
19 height: 100%;
20}
21
22.card-content {
23 padding: 1rem;
24}
25
26.card-footer {
27 padding: 1rem;
28 border-top: 1px solid #eee;
29}Dashboard Layout#
1.dashboard {
2 display: grid;
3 grid-template-columns: 250px 1fr;
4 grid-template-rows: 60px 1fr;
5 grid-template-areas:
6 "sidebar header"
7 "sidebar main";
8 height: 100vh;
9}
10
11.header {
12 grid-area: header;
13 background: #fff;
14 border-bottom: 1px solid #eee;
15}
16
17.sidebar {
18 grid-area: sidebar;
19 background: #1a1a2e;
20 color: white;
21}
22
23.main {
24 grid-area: main;
25 padding: 2rem;
26 overflow-y: auto;
27}
28
29.widgets {
30 display: grid;
31 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
32 gap: 1.5rem;
33}Holy Grail Layout#
1.holy-grail {
2 display: grid;
3 grid-template:
4 "header header header" auto
5 "nav main aside" 1fr
6 "footer footer footer" auto
7 / 200px 1fr 200px;
8 min-height: 100vh;
9 gap: 1rem;
10}
11
12header { grid-area: header; }
13nav { grid-area: nav; }
14main { grid-area: main; }
15aside { grid-area: aside; }
16footer { grid-area: footer; }
17
18/* Responsive */
19@media (max-width: 768px) {
20 .holy-grail {
21 grid-template:
22 "header" auto
23 "nav" auto
24 "main" 1fr
25 "aside" auto
26 "footer" auto
27 / 1fr;
28 }
29}Masonry-like Grid#
1/* Pseudo-masonry with auto-fill rows */
2.masonry {
3 display: grid;
4 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
5 grid-auto-rows: 10px;
6 gap: 10px;
7}
8
9.masonry-item {
10 /* Vary row spans for masonry effect */
11}
12
13.masonry-item.small { grid-row: span 15; }
14.masonry-item.medium { grid-row: span 25; }
15.masonry-item.large { grid-row: span 35; }Overlapping Items#
1.overlap-grid {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr);
4 grid-template-rows: repeat(4, 100px);
5}
6
7.background {
8 grid-column: 1 / -1;
9 grid-row: 1 / 3;
10 z-index: 1;
11}
12
13.foreground {
14 grid-column: 2 / 4;
15 grid-row: 2 / 4;
16 z-index: 2;
17}Subgrid (Modern Browsers)#
1.parent {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 1rem;
5}
6
7.child {
8 display: grid;
9 grid-column: span 3;
10 /* Inherit parent's column tracks */
11 grid-template-columns: subgrid;
12 gap: 1rem;
13}
14
15/* Child items align to parent grid */Best Practices#
Layout Choice:
✓ Grid for 2D layouts
✓ Flexbox for 1D layouts
✓ Grid for page structure
✓ Flexbox for component alignment
Responsive:
✓ Use auto-fit/auto-fill
✓ Use minmax() for flexibility
✓ Mobile-first approach
✓ Test at breakpoints
Accessibility:
✓ Maintain logical order
✓ Don't rely on visual order
✓ Use semantic HTML
✓ Test with screen readers
Avoid:
✗ Over-nesting grids
✗ Fixed sizes when flexible works
✗ Ignoring implicit grid
✗ Complex areas for simple layouts
Conclusion#
CSS Grid provides powerful two-dimensional layout capabilities. Use grid-template-areas for named regions, auto-fit and minmax() for responsive grids, and explicit placement for complex layouts. Combine with Flexbox for component-level alignment within grid items. Always consider accessibility and maintain logical source order.