CSS Grid enables powerful two-dimensional layouts. Here's how to use it for common and complex design patterns.
Basic Grid Setup#
1/* Basic grid container */
2.grid {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 grid-template-rows: auto;
6 gap: 1rem;
7}
8
9/* Fixed and flexible columns */
10.grid-mixed {
11 display: grid;
12 grid-template-columns: 250px 1fr 1fr;
13 gap: 1rem;
14}
15
16/* Explicit rows */
17.grid-explicit {
18 display: grid;
19 grid-template-columns: repeat(3, 1fr);
20 grid-template-rows: 100px 200px 100px;
21 gap: 1rem;
22}
23
24/* minmax for flexible sizing */
25.grid-responsive {
26 display: grid;
27 grid-template-columns: repeat(3, minmax(200px, 1fr));
28 gap: 1rem;
29}Auto-Fill and Auto-Fit#
1/* Auto-fill: Creates as many columns as fit */
2.grid-auto-fill {
3 display: grid;
4 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
5 gap: 1rem;
6}
7/* Creates empty columns if space available */
8
9/* Auto-fit: Stretches items to fill space */
10.grid-auto-fit {
11 display: grid;
12 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
13 gap: 1rem;
14}
15/* Stretches existing items instead of empty columns */
16
17/* Card grid that adapts to container */
18.card-grid {
19 display: grid;
20 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
21 gap: 2rem;
22 padding: 1rem;
23}Grid Template Areas#
1/* Named grid areas */
2.page-layout {
3 display: grid;
4 grid-template-columns: 250px 1fr;
5 grid-template-rows: auto 1fr auto;
6 grid-template-areas:
7 "header header"
8 "sidebar main"
9 "footer footer";
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; }
17
18/* Responsive with areas */
19@media (max-width: 768px) {
20 .page-layout {
21 grid-template-columns: 1fr;
22 grid-template-areas:
23 "header"
24 "main"
25 "sidebar"
26 "footer";
27 }
28}
29
30/* Complex dashboard layout */
31.dashboard {
32 display: grid;
33 grid-template-columns: repeat(4, 1fr);
34 grid-template-rows: auto repeat(2, 1fr);
35 grid-template-areas:
36 "header header header header"
37 "stats stats chart chart"
38 "table table table sidebar";
39 gap: 1rem;
40 padding: 1rem;
41}Spanning Rows and Columns#
1/* Span multiple columns/rows */
2.item-wide {
3 grid-column: span 2;
4}
5
6.item-tall {
7 grid-row: span 2;
8}
9
10.item-large {
11 grid-column: span 2;
12 grid-row: span 2;
13}
14
15/* Explicit positioning */
16.item-positioned {
17 grid-column: 2 / 4; /* Start at line 2, end at line 4 */
18 grid-row: 1 / 3;
19}
20
21/* Full width item */
22.item-full-width {
23 grid-column: 1 / -1; /* From first to last line */
24}
25
26/* Bento grid pattern */
27.bento-grid {
28 display: grid;
29 grid-template-columns: repeat(4, 1fr);
30 grid-auto-rows: 150px;
31 gap: 1rem;
32}
33
34.bento-grid .featured {
35 grid-column: span 2;
36 grid-row: span 2;
37}
38
39.bento-grid .tall {
40 grid-row: span 2;
41}Alignment and Justification#
1/* Container alignment */
2.grid-centered {
3 display: grid;
4 grid-template-columns: repeat(3, 200px);
5 justify-content: center; /* Horizontal alignment of grid */
6 align-content: center; /* Vertical alignment of grid */
7 gap: 1rem;
8}
9
10/* Individual item alignment */
11.grid-item-aligned {
12 justify-self: center; /* Horizontal */
13 align-self: center; /* Vertical */
14}
15
16/* All items */
17.grid-items-centered {
18 display: grid;
19 grid-template-columns: repeat(3, 1fr);
20 justify-items: center;
21 align-items: center;
22 gap: 1rem;
23}
24
25/* Place shorthand */
26.grid-place {
27 display: grid;
28 place-items: center; /* align-items and justify-items */
29 place-content: center; /* align-content and justify-content */
30}Responsive Grid Patterns#
1/* Mobile-first responsive grid */
2.responsive-grid {
3 display: grid;
4 grid-template-columns: 1fr;
5 gap: 1rem;
6}
7
8@media (min-width: 640px) {
9 .responsive-grid {
10 grid-template-columns: repeat(2, 1fr);
11 }
12}
13
14@media (min-width: 1024px) {
15 .responsive-grid {
16 grid-template-columns: repeat(3, 1fr);
17 }
18}
19
20@media (min-width: 1280px) {
21 .responsive-grid {
22 grid-template-columns: repeat(4, 1fr);
23 }
24}
25
26/* Container query responsive grid */
27.card-container {
28 container-type: inline-size;
29}
30
31.card-container .grid {
32 display: grid;
33 grid-template-columns: 1fr;
34 gap: 1rem;
35}
36
37@container (min-width: 500px) {
38 .card-container .grid {
39 grid-template-columns: repeat(2, 1fr);
40 }
41}
42
43@container (min-width: 800px) {
44 .card-container .grid {
45 grid-template-columns: repeat(3, 1fr);
46 }
47}Implicit vs Explicit Grid#
1/* Explicit grid */
2.explicit-grid {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 grid-template-rows: 100px 100px;
6 gap: 1rem;
7}
8
9/* Implicit rows for overflow */
10.auto-rows-grid {
11 display: grid;
12 grid-template-columns: repeat(3, 1fr);
13 grid-auto-rows: minmax(100px, auto);
14 gap: 1rem;
15}
16
17/* Dense packing */
18.dense-grid {
19 display: grid;
20 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
21 grid-auto-flow: dense;
22 gap: 1rem;
23}
24/* Fills in gaps with smaller items */Subgrid#
1/* Parent grid */
2.parent-grid {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 gap: 1rem;
6}
7
8/* Child inherits parent's grid */
9.child-subgrid {
10 grid-column: span 3;
11 display: grid;
12 grid-template-columns: subgrid;
13 gap: 1rem;
14}
15
16/* Card with subgrid for alignment */
17.card-grid {
18 display: grid;
19 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
20 grid-template-rows: auto;
21 gap: 2rem;
22}
23
24.card {
25 display: grid;
26 grid-template-rows: subgrid;
27 grid-row: span 3; /* header, content, footer */
28}
29
30/* Ensures all card headers/content/footers align */Common Layout Patterns#
1/* Holy grail layout */
2.holy-grail {
3 display: grid;
4 grid-template: auto 1fr auto / auto 1fr auto;
5 min-height: 100vh;
6}
7
8.holy-grail > header,
9.holy-grail > footer {
10 grid-column: 1 / -1;
11}
12
13/* Masonry-like (with row span) */
14.masonry {
15 display: grid;
16 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
17 grid-auto-rows: 50px;
18 gap: 1rem;
19}
20
21.masonry .item-small { grid-row: span 2; }
22.masonry .item-medium { grid-row: span 3; }
23.masonry .item-large { grid-row: span 4; }
24
25/* Sidebar layout */
26.sidebar-layout {
27 display: grid;
28 grid-template-columns: minmax(200px, 300px) 1fr;
29 gap: 2rem;
30}
31
32@media (max-width: 768px) {
33 .sidebar-layout {
34 grid-template-columns: 1fr;
35 }
36}
37
38/* Feature grid */
39.feature-grid {
40 display: grid;
41 grid-template-columns: repeat(12, 1fr);
42 gap: 1rem;
43}
44
45.feature-grid .main-feature {
46 grid-column: span 8;
47}
48
49.feature-grid .side-feature {
50 grid-column: span 4;
51}Grid Utilities (Tailwind-style)#
1/* Grid column utilities */
2.col-span-1 { grid-column: span 1; }
3.col-span-2 { grid-column: span 2; }
4.col-span-3 { grid-column: span 3; }
5.col-span-full { grid-column: 1 / -1; }
6
7/* Grid row utilities */
8.row-span-1 { grid-row: span 1; }
9.row-span-2 { grid-row: span 2; }
10.row-span-3 { grid-row: span 3; }
11
12/* Gap utilities */
13.gap-0 { gap: 0; }
14.gap-1 { gap: 0.25rem; }
15.gap-2 { gap: 0.5rem; }
16.gap-4 { gap: 1rem; }
17.gap-8 { gap: 2rem; }
18
19/* Column count */
20.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
21.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
22.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
23.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }Best Practices#
Layout:
✓ Use auto-fit/auto-fill for responsive grids
✓ Use grid-template-areas for complex layouts
✓ Combine with Flexbox for component internals
✓ Use minmax() for flexible sizing
Performance:
✓ Avoid excessive nesting
✓ Use will-change sparingly
✓ Test on various screen sizes
✓ Consider content reflow
Accessibility:
✓ Maintain logical source order
✓ Test with keyboard navigation
✓ Ensure proper reading order
✓ Use semantic HTML
Conclusion#
CSS Grid handles two-dimensional layouts with power and flexibility. Use auto-fit/auto-fill for responsive grids, template areas for complex layouts, and subgrid for aligned nested content. Grid and Flexbox complement each other - use Grid for page layouts and Flexbox for component internals.