Master CSS Grid for creating sophisticated two-dimensional layouts with precise row and column control. Build complex grid systems with ease.
CSS Grid is the most powerful layout system available in CSS, designed specifically for creating complex two-dimensional layouts. Unlike Flexbox which excels at one-dimensional layouts, Grid allows you to control both rows and columns simultaneously, making it perfect for page layouts, card grids, and sophisticated UI components.
Grid introduces concepts like grid tracks, grid lines, and grid areas that give you unprecedented control over layout structure. You can create responsive designs that adapt beautifully without media queries, position items precisely using line numbers or named areas, and create complex overlapping layouts.
This lesson will give you complete mastery over CSS Grid, from basic container setup to advanced techniques like implicit grids, subgrids, and responsive grid systems that form the backbone of modern web design.
A grid container is created by applying display: grid, establishing a grid formatting context where all direct children become grid items.
Creating a Grid Container:
1.grid-container {
2 display: grid; /* Creates grid formatting context */
3 /* All direct children become grid items */
4}
5
6.inline-grid-container {
7 display: inline-grid; /* Inline-level grid container */
8 /* Container behaves inline, children grid internally */
9}Grid Template Columns - Defining Column Structure:
1/* Fixed column widths */
2.grid-fixed {
3 display: grid;
4 grid-template-columns: 200px 300px 150px;
5}
6
7/* Flexible column widths */
8.grid-flexible {
9 display: grid;
10 grid-template-columns: 1fr 2fr 1fr; /* Fractional units */
11}
12
13/* Mixed units */
14.grid-mixed {
15 display: grid;
16 grid-template-columns: 250px 1fr 20%;
17}
18
19/* Repeat function for patterns */
20.grid-repeat {
21 display: grid;
22 grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
23 grid-template-columns: repeat(4, 100px); /* 4 fixed columns */
24 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
25}
26
27/* Auto-sizing columns */
28.grid-auto {
29 display: grid;
30 grid-template-columns: auto 1fr auto; /* Size to content | flexible | size to content */
31}Grid Template Rows - Defining Row Structure:
1/* Fixed row heights */
2.grid-rows-fixed {
3 display: grid;
4 grid-template-rows: 100px 200px 150px;
5}
6
7/* Flexible row heights */
8.grid-rows-flexible {
9 display: grid;
10 grid-template-rows: 1fr 2fr 1fr;
11}
12
13/* Auto-sizing rows */
14.grid-rows-auto {
15 display: grid;
16 grid-template-rows: auto 1fr auto;
17}
18
19/* Implicit rows (for overflow items) */
20.grid-implicit {
21 display: grid;
22 grid-template-columns: repeat(3, 1fr);
23 grid-auto-rows: 150px; /* Height for implicit rows */
24}Grid Gap - Spacing Between Items:
1.grid-gap {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 20px; /* Row and column gap */
5 /* or */
6 row-gap: 20px;
7 column-gap: 30px; /* Different row and column gaps */
8}
9
10/* Old syntax (still supported) */
11.grid-gap-legacy {
12 display: grid;
13 grid-gap: 20px; /* Both directions */
14 grid-row-gap: 20px; /* Row gap only */
15 grid-column-gap: 30px; /* Column gap only */
16}Practical Grid Container Examples:
1/* Simple 3-column layout */
2.three-column {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 gap: 2rem;
6}
7
8/* Header-main-footer layout */
9.page-layout {
10 display: grid;
11 grid-template-columns: 1fr;
12 grid-template-rows: auto 1fr auto;
13 min-height: 100vh;
14}
15
16/* Sidebar layout */
17.sidebar-layout {
18 display: grid;
19 grid-template-columns: 250px 1fr;
20 gap: 2rem;
21 min-height: 100vh;
22}
23
24/* Responsive grid without media queries */
25.responsive-grid {
26 display: grid;
27 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
28 gap: 2rem;
29}Grid lines are numbered starting from 1, and you can position items precisely using line numbers or span keywords.
Basic Line Positioning:
1.grid-container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr);
4 grid-template-rows: repeat(3, 150px);
5 gap: 1rem;
6}
7
8/* Position item using line numbers */
9.grid-item-positioned {
10 grid-column-start: 2;
11 grid-column-end: 4; /* Spans from line 2 to 4 */
12 grid-row-start: 1;
13 grid-row-end: 3; /* Spans from line 1 to 3 */
14}
15
16/* Shorthand positioning */
17.grid-item-shorthand {
18 grid-column: 2 / 4; /* start / end */
19 grid-row: 1 / 3;
20 /* or */
21 grid-area: 1 / 2 / 3 / 4; /* row-start / col-start / row-end / col-end */
22}Using Span Keyword:
1.span-columns {
2 grid-column: 1 / span 2; /* Start at 1, span 2 columns */
3 grid-row: 1 / span 1; /* Start at 1, span 1 row */
4}
5
6.span-from-end {
7 grid-column: span 2 / -1; /* Span 2 columns ending at last line */
8 grid-row: 2 / span 2;
9}
10
11/* Span entire row or column */
12.full-width {
13 grid-column: 1 / -1; /* Span all columns */
14}
15
16.full-height {
17 grid-row: 1 / -1; /* Span all rows */
18}Named Grid Lines:
1.named-lines {
2 display: grid;
3 grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end aside-start] 200px [aside-end];
4 grid-template-rows: [header-start] 80px [header-end content-start] 1fr [content-end footer-start] 60px [footer-end];
5 gap: 1rem;
6}
7
8.header {
9 grid-column: sidebar-start / aside-end;
10 grid-row: header-start / header-end;
11}
12
13.sidebar {
14 grid-column: sidebar-start / sidebar-end;
15 grid-row: content-start / content-end;
16}
17
18.main {
19 grid-column: main-start / main-end;
20 grid-row: content-start / content-end;
21}Auto Placement and Flow:
1.auto-placement {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 grid-auto-rows: 150px;
5 grid-auto-flow: row; /* Default: place items in rows */
6 gap: 1rem;
7}
8
9.auto-flow-column {
10 display: grid;
11 grid-template-rows: repeat(3, 150px);
12 grid-auto-columns: 200px;
13 grid-auto-flow: column; /* Place items in columns */
14 gap: 1rem;
15}
16
17.auto-flow-dense {
18 display: grid;
19 grid-template-columns: repeat(4, 1fr);
20 grid-auto-flow: row dense; /* Fill holes in grid */
21 gap: 1rem;
22}Advanced Positioning Patterns:
1/* Overlapping items */
2.overlay-item {
3 grid-column: 1 / 3;
4 grid-row: 1 / 3;
5 z-index: 1;
6}
7
8.background-item {
9 grid-column: 2 / 4;
10 grid-row: 2 / 4;
11 z-index: 0;
12}
13
14/* Complex magazine-style layout */
15.magazine-layout {
16 display: grid;
17 grid-template-columns: repeat(6, 1fr);
18 grid-template-rows: repeat(4, 200px);
19 gap: 1rem;
20}
21
22.feature-article {
23 grid-column: 1 / 4; /* Spans 3 columns */
24 grid-row: 1 / 3; /* Spans 2 rows */
25}
26
27.side-article-1 {
28 grid-column: 4 / 7; /* Spans 3 columns */
29 grid-row: 1 / 2; /* Spans 1 row */
30}
31
32.side-article-2 {
33 grid-column: 4 / 7;
34 grid-row: 2 / 3;
35}
36
37.bottom-articles {
38 grid-column: 1 / 7; /* Full width */
39 grid-row: 3 / 5;
40 display: grid; /* Nested grid */
41 grid-template-columns: repeat(3, 1fr);
42 gap: 1rem;
43}Grid template areas provide a visual, semantic way to define layouts using named grid areas that make complex layouts easy to understand and maintain.
Defining Grid Areas:
1.layout-container {
2 display: grid;
3 grid-template-columns: 250px 1fr 200px;
4 grid-template-rows: 80px 1fr 60px;
5 grid-template-areas:
6 "header header header"
7 "sidebar main aside"
8 "footer footer footer";
9 gap: 1rem;
10 min-height: 100vh;
11}
12
13/* Assign items to areas */
14.header { grid-area: header; }
15.sidebar { grid-area: sidebar; }
16.main { grid-area: main; }
17.aside { grid-area: aside; }
18.footer { grid-area: footer; }Responsive Area Layouts:
1.responsive-areas {
2 display: grid;
3 gap: 1rem;
4
5 /* Mobile: single column */
6 grid-template-columns: 1fr;
7 grid-template-areas:
8 "header"
9 "main"
10 "sidebar"
11 "aside"
12 "footer";
13}
14
15@media (min-width: 768px) {
16 .responsive-areas {
17 /* Tablet: main with sidebar */
18 grid-template-columns: 1fr 250px;
19 grid-template-areas:
20 "header header"
21 "main sidebar"
22 "aside sidebar"
23 "footer footer";
24 }
25}
26
27@media (min-width: 1024px) {
28 .responsive-areas {
29 /* Desktop: full layout */
30 grid-template-columns: 250px 1fr 200px;
31 grid-template-areas:
32 "header header header"
33 "sidebar main aside"
34 "footer footer footer";
35 }
36}Complex Area Patterns:
1/* Dashboard layout */
2.dashboard {
3 display: grid;
4 grid-template-columns: repeat(4, 1fr);
5 grid-template-rows: auto 200px 200px 200px auto;
6 grid-template-areas:
7 "nav nav nav nav"
8 "stats stats chart chart"
9 "recent recent chart chart"
10 "tasks tasks activity activity"
11 "footer footer footer footer";
12 gap: 1rem;
13 padding: 1rem;
14}
15
16.nav { grid-area: nav; }
17.stats { grid-area: stats; }
18.chart { grid-area: chart; }
19.recent { grid-area: recent; }
20.tasks { grid-area: tasks; }
21.activity { grid-area: activity; }
22.footer { grid-area: footer; }Empty Cells and Dots:
1.sparse-layout {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 grid-template-rows: repeat(3, 150px);
5 grid-template-areas:
6 "header header ."
7 "sidebar main main"
8 ". footer footer";
9 gap: 1rem;
10}
11/* Dots (.) represent empty cells */Nested Grids with Areas:
1.outer-grid {
2 display: grid;
3 grid-template-columns: 1fr;
4 grid-template-rows: auto 1fr auto;
5 grid-template-areas:
6 "header"
7 "content"
8 "footer";
9 min-height: 100vh;
10}
11
12.content-area {
13 grid-area: content;
14 display: grid; /* Nested grid */
15 grid-template-columns: 1fr 300px;
16 grid-template-areas:
17 "main sidebar";
18 gap: 2rem;
19}
20
21.main-content {
22 grid-area: main;
23 display: grid; /* Another nested grid */
24 grid-template-areas:
25 "hero"
26 "articles"
27 "cta";
28 gap: 2rem;
29}Dynamic Area Manipulation:
1/* Base layout */
2.dynamic-layout {
3 display: grid;
4 grid-template-columns: 250px 1fr 250px;
5 grid-template-areas:
6 "sidebar-left main sidebar-right";
7}
8
9/* Hide left sidebar */
10.hide-left-sidebar {
11 grid-template-columns: 0 1fr 250px;
12 grid-template-areas:
13 ". main sidebar-right";
14}
15
16/* Hide right sidebar */
17.hide-right-sidebar {
18 grid-template-columns: 250px 1fr 0;
19 grid-template-areas:
20 "sidebar-left main .";
21}
22
23/* Full width main */
24.full-width-main {
25 grid-template-columns: 0 1fr 0;
26 grid-template-areas:
27 ". main .";
28}Best Practices for Grid Areas:
1/* Use consistent naming */
2.consistent-naming {
3 grid-template-areas:
4 "page-header page-header page-header"
5 "page-nav page-main page-aside"
6 "page-footer page-footer page-footer";
7}
8
9/* Keep areas rectangular */
10.rectangular-areas {
11 /* Good: rectangular areas */
12 grid-template-areas:
13 "header header"
14 "main aside"
15 "footer footer";
16
17 /* Avoid: non-rectangular areas cause errors */
18 /*
19 grid-template-areas:
20 "header main"
21 "header aside"
22 "footer aside"; // Error: header is L-shaped
23 */
24}
25
26/* Use semantic names */
27.semantic-areas {
28 grid-template-areas:
29 "branding navigation search"
30 "breadcrumb breadcrumb breadcrumb"
31 "content content sidebar"
32 "pagination pagination sidebar"
33 "footer footer footer";
34}Master advanced Grid techniques including implicit grids, alignment properties, and sophisticated responsive patterns.
Grid Alignment Properties:
1.grid-alignment {
2 display: grid;
3 grid-template-columns: repeat(3, 200px);
4 grid-template-rows: repeat(2, 150px);
5 gap: 1rem;
6
7 /* Align the entire grid within container */
8 justify-content: center; /* Horizontal: start|end|center|stretch|space-around|space-between|space-evenly */
9 align-content: center; /* Vertical: start|end|center|stretch|space-around|space-between|space-evenly */
10
11 /* Default alignment for all grid items */
12 justify-items: stretch; /* Horizontal item alignment: start|end|center|stretch */
13 align-items: stretch; /* Vertical item alignment: start|end|center|stretch */
14}
15
16/* Individual item alignment */
17.special-item {
18 justify-self: center; /* Override justify-items for this item */
19 align-self: start; /* Override align-items for this item */
20}Implicit Grid Control:
1.implicit-grid {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4
5 /* Control implicit rows (created automatically) */
6 grid-auto-rows: 200px;
7
8 /* Control implicit columns */
9 grid-auto-columns: 150px;
10
11 /* Control placement direction */
12 grid-auto-flow: row; /* row | column | row dense | column dense */
13}
14
15/* Dense packing fills holes */
16.dense-grid {
17 display: grid;
18 grid-template-columns: repeat(4, 1fr);
19 grid-auto-flow: row dense;
20 gap: 1rem;
21}
22
23.large-item {
24 grid-column: span 2; /* Takes 2 columns */
25}Advanced Responsive Patterns:
1/* Auto-fit vs auto-fill */
2.auto-fit-grid {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
5 /* Columns grow to fill available space */
6}
7
8.auto-fill-grid {
9 display: grid;
10 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
11 /* Creates empty columns if space available */
12}
13
14/* Responsive without media queries */
15.intrinsic-responsive {
16 display: grid;
17 grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
18 gap: 2rem;
19}
20
21/* Container query style responsiveness */
22.container-responsive {
23 display: grid;
24 grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 50%, 500px), 1fr));
25 gap: clamp(1rem, 3vw, 2rem);
26}Complex Layout Systems:
1/* Masonry-style layout (basic approach) */
2.masonry-grid {
3 display: grid;
4 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
5 grid-auto-rows: 10px; /* Small row height for precise control */
6}
7
8.masonry-item {
9 /* Items span multiple small rows based on content */
10 grid-row: span var(--row-span);
11}
12
13/* Card layout with consistent bottoms */
14.card-grid-aligned {
15 display: grid;
16 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
17 gap: 2rem;
18 align-items: stretch; /* Stretch all items to same height */
19}
20
21.card {
22 display: flex;
23 flex-direction: column;
24}
25
26.card-content {
27 flex: 1; /* Push footer to bottom */
28}
29
30/* Multi-level responsive layout */
31.complex-responsive {
32 display: grid;
33 gap: 1rem;
34
35 /* Mobile: stack everything */
36 grid-template-columns: 1fr;
37 grid-template-areas:
38 "header"
39 "nav"
40 "main"
41 "aside"
42 "footer";
43}
44
45@media (min-width: 600px) {
46 .complex-responsive {
47 /* Small tablets: nav with main */
48 grid-template-columns: 200px 1fr;
49 grid-template-areas:
50 "header header"
51 "nav main"
52 "nav aside"
53 "footer footer";
54 }
55}
56
57@media (min-width: 900px) {
58 .complex-responsive {
59 /* Large tablets: three columns */
60 grid-template-columns: 200px 1fr 250px;
61 grid-template-areas:
62 "header header header"
63 "nav main aside"
64 "footer footer footer";
65 }
66}
67
68@media (min-width: 1200px) {
69 .complex-responsive {
70 /* Desktop: expanded layout */
71 grid-template-columns: 250px 1fr 300px;
72 grid-template-areas:
73 "header header header"
74 "nav main aside"
75 "nav related aside"
76 "footer footer footer";
77 }
78}Grid Performance Optimization:
1/* Efficient grid patterns */
2.performant-grid {
3 display: grid;
4 /* Use fr units over percentages for better performance */
5 grid-template-columns: 1fr 2fr 1fr;
6
7 /* Avoid excessive implicit rows */
8 grid-auto-rows: minmax(150px, auto);
9
10 /* Use will-change sparingly */
11 will-change: grid-template-columns;
12}
13
14/* Optimize for animations */
15.animated-grid {
16 display: grid;
17 grid-template-columns: 1fr;
18 transition: grid-template-columns 0.3s ease;
19}
20
21.animated-grid.expanded {
22 grid-template-columns: 250px 1fr;
23}Subgrid (Future/Progressive Enhancement):
1/* Future subgrid support */
2.parent-grid {
3 display: grid;
4 grid-template-columns: repeat(4, 1fr);
5 gap: 1rem;
6}
7
8.nested-grid-item {
9 grid-column: span 2;
10 display: grid;
11 /* grid-template-columns: subgrid; /* Future feature */
12 /* gap: inherit; /* Inherit parent gap */
13
14 /* Current workaround */
15 grid-template-columns: 1fr 1fr;
16 gap: 1rem;
17}A comprehensive demonstration of CSS Grid with two-dimensional layouts, grid areas, line positioning, and responsive grid patterns.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Grid Layout Mastery</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 line-height: 1.6;
17 color: #333;
18 background: #f8fafc;
19 }
20
21 /* Main Page Layout using Grid Areas */
22 .page-layout {
23 display: grid;
24 grid-template-columns: 1fr;
25 grid-template-rows: auto 1fr auto;
26 grid-template-areas:
27 "header"
28 "main"
29 "footer";
30 min-height: 100vh;
31 }
32
33 .page-header {
34 grid-area: header;
35 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
36 color: white;
37 padding: 2rem 0;
38 }
39
40 .page-main {
41 grid-area: main;
42 padding: 2rem 0;
43 }
44
45 .page-footer {
46 grid-area: footer;
47 background: #1e293b;
48 color: white;
49 padding: 2rem 0;
50 text-align: center;
51 }
52
53 /* Header Navigation Grid */
54 .header-nav {
55 max-width: 1200px;
56 margin: 0 auto;
57 padding: 0 2rem;
58 display: grid;
59 grid-template-columns: auto 1fr auto;
60 align-items: center;
61 gap: 2rem;
62 }
63
64 .nav-brand {
65 font-size: 1.5rem;
66 font-weight: bold;
67 color: white;
68 text-decoration: none;
69 }
70
71 .nav-menu {
72 display: grid;
73 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
74 gap: 1rem;
75 list-style: none;
76 }
77
78 .nav-menu a {
79 color: white;
80 text-decoration: none;
81 padding: 0.5rem 1rem;
82 border-radius: 20px;
83 text-align: center;
84 transition: all 0.3s ease;
85 }
86
87 .nav-menu a:hover {
88 background: rgba(255,255,255,0.2);
89 }
90
91 .nav-actions {
92 display: grid;
93 grid-template-columns: repeat(2, auto);
94 gap: 1rem;
95 }
96
97 .btn {
98 padding: 0.5rem 1.5rem;
99 border: 2px solid white;
100 background: transparent;
101 color: white;
102 text-decoration: none;
103 border-radius: 25px;
104 font-weight: 500;
105 text-align: center;
106 transition: all 0.3s ease;
107 }
108
109 .btn:hover {
110 background: white;
111 color: #667eea;
112 }
113
114 /* Container for content sections */
115 .container {
116 max-width: 1200px;
117 margin: 0 auto;
118 padding: 0 2rem;
119 }
120
121 /* Hero Section with Grid */
122 .hero {
123 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
124 color: white;
125 padding: 4rem 0;
126 margin-bottom: 4rem;
127 }
128
129 .hero-grid {
130 display: grid;
131 grid-template-columns: 1fr;
132 grid-template-areas:
133 "content"
134 "image";
135 gap: 3rem;
136 align-items: center;
137 text-align: center;
138 }
139
140 .hero-content {
141 grid-area: content;
142 }
143
144 .hero-image {
145 grid-area: image;
146 display: grid;
147 grid-template-columns: repeat(3, 1fr);
148 gap: 1rem;
149 justify-items: center;
150 }
151
152 .hero-icon {
153 width: 80px;
154 height: 80px;
155 background: rgba(255,255,255,0.2);
156 border-radius: 12px;
157 display: flex;
158 align-items: center;
159 justify-content: center;
160 font-size: 2rem;
161 }
162
163 .hero h1 {
164 font-size: clamp(2.5rem, 5vw, 4rem);
165 margin-bottom: 1rem;
166 }
167
168 /* Section Styling */
169 .section {
170 margin-bottom: 4rem;
171 }
172
173 .section-title {
174 text-align: center;
175 font-size: 2.5rem;
176 color: #1e293b;
177 margin-bottom: 3rem;
178 }
179
180 /* Basic Grid Examples */
181 .grid-examples {
182 display: grid;
183 gap: 3rem;
184 margin-bottom: 4rem;
185 }
186
187 .grid-example {
188 background: white;
189 border-radius: 16px;
190 padding: 2rem;
191 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
192 }
193
194 .example-title {
195 font-size: 1.3rem;
196 font-weight: 600;
197 color: #3b82f6;
198 margin-bottom: 1rem;
199 }
200
201 .example-description {
202 color: #64748b;
203 margin-bottom: 2rem;
204 }
205
206 /* Three Column Grid */
207 .three-column-grid {
208 display: grid;
209 grid-template-columns: repeat(3, 1fr);
210 gap: 1rem;
211 margin-bottom: 1rem;
212 }
213
214 .grid-item {
215 background: #3b82f6;
216 color: white;
217 padding: 2rem 1rem;
218 border-radius: 8px;
219 text-align: center;
220 font-weight: 600;
221 display: flex;
222 align-items: center;
223 justify-content: center;
224 min-height: 100px;
225 }
226
227 /* Fractional Units Demo */
228 .fr-units-grid {
229 display: grid;
230 grid-template-columns: 1fr 2fr 1fr;
231 gap: 1rem;
232 margin-bottom: 1rem;
233 }
234
235 .fr-item-1 {
236 background: #10b981;
237 color: white;
238 padding: 2rem 1rem;
239 border-radius: 8px;
240 text-align: center;
241 display: flex;
242 align-items: center;
243 justify-content: center;
244 min-height: 100px;
245 }
246
247 .fr-item-2 {
248 background: #f59e0b;
249 color: white;
250 padding: 2rem 1rem;
251 border-radius: 8px;
252 text-align: center;
253 display: flex;
254 align-items: center;
255 justify-content: center;
256 min-height: 100px;
257 }
258
259 .fr-item-3 {
260 background: #ef4444;
261 color: white;
262 padding: 2rem 1rem;
263 border-radius: 8px;
264 text-align: center;
265 display: flex;
266 align-items: center;
267 justify-content: center;
268 min-height: 100px;
269 }
270
271 /* Auto-fit Responsive Grid */
272 .auto-fit-grid {
273 display: grid;
274 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
275 gap: 1rem;
276 margin-bottom: 1rem;
277 }
278
279 .responsive-item {
280 background: #8b5cf6;
281 color: white;
282 padding: 2rem 1rem;
283 border-radius: 8px;
284 text-align: center;
285 display: flex;
286 align-items: center;
287 justify-content: center;
288 min-height: 120px;
289 }
290
291 /* Line-based Positioning */
292 .line-positioning-grid {
293 display: grid;
294 grid-template-columns: repeat(4, 1fr);
295 grid-template-rows: repeat(3, 120px);
296 gap: 1rem;
297 margin-bottom: 1rem;
298 }
299
300 .positioned-item-1 {
301 grid-column: 1 / 3;
302 grid-row: 1 / 2;
303 background: #3b82f6;
304 color: white;
305 display: flex;
306 align-items: center;
307 justify-content: center;
308 border-radius: 8px;
309 font-weight: 600;
310 }
311
312 .positioned-item-2 {
313 grid-column: 3 / 5;
314 grid-row: 1 / 3;
315 background: #10b981;
316 color: white;
317 display: flex;
318 align-items: center;
319 justify-content: center;
320 border-radius: 8px;
321 font-weight: 600;
322 }
323
324 .positioned-item-3 {
325 grid-column: 1 / 2;
326 grid-row: 2 / 4;
327 background: #f59e0b;
328 color: white;
329 display: flex;
330 align-items: center;
331 justify-content: center;
332 border-radius: 8px;
333 font-weight: 600;
334 }
335
336 .positioned-item-4 {
337 grid-column: 2 / 4;
338 grid-row: 2 / 4;
339 background: #ef4444;
340 color: white;
341 display: flex;
342 align-items: center;
343 justify-content: center;
344 border-radius: 8px;
345 font-weight: 600;
346 }
347
348 /* Grid Areas Layout */
349 .areas-layout {
350 display: grid;
351 grid-template-columns: 250px 1fr 200px;
352 grid-template-rows: 80px 1fr 60px;
353 grid-template-areas:
354 "header-area header-area header-area"
355 "sidebar-area main-area aside-area"
356 "footer-area footer-area footer-area";
357 gap: 1rem;
358 min-height: 400px;
359 margin-bottom: 2rem;
360 }
361
362 .area-header {
363 grid-area: header-area;
364 background: #1e293b;
365 color: white;
366 display: flex;
367 align-items: center;
368 justify-content: center;
369 border-radius: 8px;
370 font-weight: 600;
371 }
372
373 .area-sidebar {
374 grid-area: sidebar-area;
375 background: #3b82f6;
376 color: white;
377 display: flex;
378 align-items: center;
379 justify-content: center;
380 border-radius: 8px;
381 font-weight: 600;
382 }
383
384 .area-main {
385 grid-area: main-area;
386 background: #10b981;
387 color: white;
388 display: flex;
389 align-items: center;
390 justify-content: center;
391 border-radius: 8px;
392 font-weight: 600;
393 }
394
395 .area-aside {
396 grid-area: aside-area;
397 background: #f59e0b;
398 color: white;
399 display: flex;
400 align-items: center;
401 justify-content: center;
402 border-radius: 8px;
403 font-weight: 600;
404 }
405
406 .area-footer {
407 grid-area: footer-area;
408 background: #64748b;
409 color: white;
410 display: flex;
411 align-items: center;
412 justify-content: center;
413 border-radius: 8px;
414 font-weight: 600;
415 }
416
417 /* Card Grid with Different Sizes */
418 .card-grid {
419 display: grid;
420 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
421 gap: 2rem;
422 margin-bottom: 4rem;
423 }
424
425 .card {
426 background: white;
427 border-radius: 16px;
428 padding: 2rem;
429 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
430 transition: all 0.3s ease;
431 display: grid;
432 grid-template-rows: auto 1fr auto;
433 gap: 1rem;
434 }
435
436 .card:hover {
437 transform: translateY(-5px);
438 box-shadow: 0 12px 40px rgba(0,0,0,0.15);
439 }
440
441 .card-header {
442 display: grid;
443 grid-template-columns: auto 1fr;
444 gap: 1rem;
445 align-items: center;
446 }
447
448 .card-icon {
449 width: 50px;
450 height: 50px;
451 border-radius: 12px;
452 display: flex;
453 align-items: center;
454 justify-content: center;
455 font-size: 1.5rem;
456 color: white;
457 }
458
459 .card-title {
460 font-size: 1.3rem;
461 font-weight: 600;
462 color: #1e293b;
463 }
464
465 .card-content {
466 color: #64748b;
467 }
468
469 .card-footer {
470 padding-top: 1rem;
471 border-top: 1px solid #e2e8f0;
472 }
473
474 .card-button {
475 width: 100%;
476 padding: 0.75rem 1.5rem;
477 background: #3b82f6;
478 color: white;
479 border: none;
480 border-radius: 8px;
481 font-weight: 600;
482 cursor: pointer;
483 transition: all 0.3s ease;
484 }
485
486 .card-button:hover {
487 background: #2563eb;
488 }
489
490 /* Dashboard Grid Layout */
491 .dashboard {
492 display: grid;
493 grid-template-columns: repeat(4, 1fr);
494 grid-template-rows: auto 200px 200px 150px;
495 grid-template-areas:
496 "nav-dash nav-dash nav-dash nav-dash"
497 "stats-1 stats-2 chart-area chart-area"
498 "recent-activity recent-activity chart-area chart-area"
499 "task-list task-list notifications notifications";
500 gap: 1.5rem;
501 background: white;
502 border-radius: 16px;
503 padding: 2rem;
504 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
505 margin-bottom: 4rem;
506 }
507
508 .dash-nav {
509 grid-area: nav-dash;
510 background: #1e293b;
511 color: white;
512 padding: 1rem;
513 border-radius: 8px;
514 display: flex;
515 align-items: center;
516 justify-content: space-between;
517 }
518
519 .dash-stats-1 {
520 grid-area: stats-1;
521 background: linear-gradient(135deg, #3b82f6, #1e40af);
522 color: white;
523 padding: 1.5rem;
524 border-radius: 8px;
525 display: flex;
526 flex-direction: column;
527 justify-content: space-between;
528 }
529
530 .dash-stats-2 {
531 grid-area: stats-2;
532 background: linear-gradient(135deg, #10b981, #047857);
533 color: white;
534 padding: 1.5rem;
535 border-radius: 8px;
536 display: flex;
537 flex-direction: column;
538 justify-content: space-between;
539 }
540
541 .dash-chart {
542 grid-area: chart-area;
543 background: #f8fafc;
544 border: 2px solid #e2e8f0;
545 border-radius: 8px;
546 display: flex;
547 align-items: center;
548 justify-content: center;
549 color: #64748b;
550 font-size: 1.2rem;
551 font-weight: 600;
552 }
553
554 .dash-recent {
555 grid-area: recent-activity;
556 background: #fef3c7;
557 padding: 1.5rem;
558 border-radius: 8px;
559 display: flex;
560 flex-direction: column;
561 justify-content: space-between;
562 }
563
564 .dash-tasks {
565 grid-area: task-list;
566 background: #dbeafe;
567 padding: 1.5rem;
568 border-radius: 8px;
569 display: flex;
570 flex-direction: column;
571 justify-content: space-between;
572 }
573
574 .dash-notifications {
575 grid-area: notifications;
576 background: #fce7f3;
577 padding: 1.5rem;
578 border-radius: 8px;
579 display: flex;
580 flex-direction: column;
581 justify-content: space-between;
582 }
583
584 /* Magazine Layout */
585 .magazine-layout {
586 display: grid;
587 grid-template-columns: repeat(6, 1fr);
588 grid-template-rows: repeat(4, 200px);
589 gap: 1rem;
590 background: white;
591 border-radius: 16px;
592 padding: 2rem;
593 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
594 margin-bottom: 4rem;
595 }
596
597 .magazine-feature {
598 grid-column: 1 / 4;
599 grid-row: 1 / 3;
600 background: linear-gradient(135deg, #667eea, #764ba2);
601 color: white;
602 border-radius: 12px;
603 padding: 2rem;
604 display: flex;
605 flex-direction: column;
606 justify-content: space-between;
607 }
608
609 .magazine-article-1 {
610 grid-column: 4 / 7;
611 grid-row: 1 / 2;
612 background: #3b82f6;
613 color: white;
614 border-radius: 8px;
615 padding: 1.5rem;
616 display: flex;
617 align-items: center;
618 justify-content: center;
619 }
620
621 .magazine-article-2 {
622 grid-column: 4 / 7;
623 grid-row: 2 / 3;
624 background: #10b981;
625 color: white;
626 border-radius: 8px;
627 padding: 1.5rem;
628 display: flex;
629 align-items: center;
630 justify-content: center;
631 }
632
633 .magazine-bottom {
634 grid-column: 1 / 7;
635 grid-row: 3 / 5;
636 background: #f1f5f9;
637 border-radius: 8px;
638 padding: 1.5rem;
639 display: grid;
640 grid-template-columns: repeat(3, 1fr);
641 gap: 1rem;
642 }
643
644 .magazine-small {
645 background: #f59e0b;
646 color: white;
647 border-radius: 8px;
648 padding: 1rem;
649 display: flex;
650 align-items: center;
651 justify-content: center;
652 font-weight: 600;
653 }
654
655 /* Responsive Grid Patterns */
656 @media (min-width: 768px) {
657 .hero-grid {
658 grid-template-columns: 1fr 1fr;
659 grid-template-areas: "content image";
660 text-align: left;
661 }
662
663 .page-layout {
664 grid-template-columns: 250px 1fr;
665 grid-template-areas:
666 "header header"
667 "sidebar main"
668 "footer footer";
669 }
670
671 .areas-layout {
672 grid-template-columns: 200px 1fr 150px;
673 }
674 }
675
676 @media (max-width: 768px) {
677 .header-nav {
678 grid-template-columns: 1fr;
679 gap: 1rem;
680 text-align: center;
681 }
682
683 .nav-menu {
684 grid-template-columns: repeat(2, 1fr);
685 }
686
687 .dashboard {
688 grid-template-columns: 1fr;
689 grid-template-areas:
690 "nav-dash"
691 "stats-1"
692 "stats-2"
693 "chart-area"
694 "recent-activity"
695 "task-list"
696 "notifications";
697 }
698
699 .areas-layout {
700 grid-template-columns: 1fr;
701 grid-template-areas:
702 "header-area"
703 "main-area"
704 "sidebar-area"
705 "aside-area"
706 "footer-area";
707 }
708
709 .magazine-layout {
710 grid-template-columns: 1fr;
711 grid-template-rows: auto auto auto auto auto auto auto;
712 grid-template-areas:
713 "feature"
714 "article-1"
715 "article-2"
716 "small-1"
717 "small-2"
718 "small-3";
719 }
720
721 .magazine-feature { grid-area: feature; }
722 .magazine-article-1 { grid-area: article-1; }
723 .magazine-article-2 { grid-area: article-2; }
724 }
725
726 /* Animation utilities */
727 .animate-fade-in {
728 animation: fadeIn 0.6s ease-out;
729 }
730
731 @keyframes fadeIn {
732 from {
733 opacity: 0;
734 transform: translateY(20px);
735 }
736 to {
737 opacity: 1;
738 transform: translateY(0);
739 }
740 }
741 </style>
742</head>
743<body>
744 <!-- Main Page Layout -->
745 <div class="page-layout">
746 <!-- Page Header -->
747 <header class="page-header">
748 <nav class="header-nav">
749 <a href="#" class="nav-brand">🎯 CSS Grid Master</a>
750
751 <ul class="nav-menu">
752 <li><a href="#basics">Basics</a></li>
753 <li><a href="#positioning">Positioning</a></li>
754 <li><a href="#areas">Areas</a></li>
755 <li><a href="#layouts">Layouts</a></li>
756 </ul>
757
758 <div class="nav-actions">
759 <a href="#" class="btn">Learn More</a>
760 <a href="#" class="btn">Get Started</a>
761 </div>
762 </nav>
763 </header>
764
765 <!-- Main Content Area -->
766 <main class="page-main">
767 <!-- Hero Section -->
768 <section class="hero">
769 <div class="container">
770 <div class="hero-grid animate-fade-in">
771 <div class="hero-content">
772 <h1>Master CSS Grid Layout</h1>
773 <p>Learn powerful two-dimensional layout techniques that give you complete control over rows and columns. Build sophisticated, responsive designs with ease.</p>
774 <div style="margin-top: 2rem;">
775 <a href="#basics" class="btn" style="margin-right: 1rem;">Start Learning</a>
776 <a href="#layouts" class="btn">See Examples</a>
777 </div>
778 </div>
779 <div class="hero-image">
780 <div class="hero-icon">📐</div>
781 <div class="hero-icon">🎯</div>
782 <div class="hero-icon">📱</div>
783 </div>
784 </div>
785 </div>
786 </section>
787
788 <div class="container">
789 <!-- Basic Grid Examples -->
790 <section id="basics" class="section">
791 <h2 class="section-title">🏗️ Grid Fundamentals</h2>
792 <div class="grid-examples">
793 <!-- Three Column Grid -->
794 <div class="grid-example animate-fade-in">
795 <h3 class="example-title">Three Equal Columns</h3>
796 <p class="example-description">
797 Using <code>grid-template-columns: repeat(3, 1fr)</code> creates three equal columns.
798 </p>
799 <div class="three-column-grid">
800 <div class="grid-item">Column 1</div>
801 <div class="grid-item">Column 2</div>
802 <div class="grid-item">Column 3</div>
803 </div>
804 <p><strong>Code:</strong> <code>grid-template-columns: repeat(3, 1fr);</code></p>
805 </div>
806
807 <!-- Fractional Units -->
808 <div class="grid-example animate-fade-in">
809 <h3 class="example-title">Fractional Units (fr)</h3>
810 <p class="example-description">
811 Using <code>1fr 2fr 1fr</code> creates proportional columns where the middle takes twice the space.
812 </p>
813 <div class="fr-units-grid">
814 <div class="fr-item-1">1fr</div>
815 <div class="fr-item-2">2fr (Double Width)</div>
816 <div class="fr-item-3">1fr</div>
817 </div>
818 <p><strong>Code:</strong> <code>grid-template-columns: 1fr 2fr 1fr;</code></p>
819 </div>
820
821 <!-- Auto-fit Responsive -->
822 <div class="grid-example animate-fade-in">
823 <h3 class="example-title">Responsive Auto-fit Grid</h3>
824 <p class="example-description">
825 Using <code>repeat(auto-fit, minmax(250px, 1fr))</code> creates responsive columns that adapt to screen size.
826 </p>
827 <div class="auto-fit-grid">
828 <div class="responsive-item">Item 1</div>
829 <div class="responsive-item">Item 2</div>
830 <div class="responsive-item">Item 3</div>
831 <div class="responsive-item">Item 4</div>
832 </div>
833 <p><strong>Code:</strong> <code>grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));</code></p>
834 </div>
835 </div>
836 </section>
837
838 <!-- Line-based Positioning -->
839 <section id="positioning" class="section">
840 <h2 class="section-title">📍 Line-based Positioning</h2>
841 <div class="grid-example animate-fade-in">
842 <h3 class="example-title">Precise Item Positioning</h3>
843 <p class="example-description">
844 Position items exactly where you want using grid line numbers. Items can span multiple columns and rows.
845 </p>
846 <div class="line-positioning-grid">
847 <div class="positioned-item-1">grid-column: 1/3<br>grid-row: 1/2</div>
848 <div class="positioned-item-2">grid-column: 3/5<br>grid-row: 1/3</div>
849 <div class="positioned-item-3">grid-column: 1/2<br>grid-row: 2/4</div>
850 <div class="positioned-item-4">grid-column: 2/4<br>grid-row: 2/4</div>
851 </div>
852 <p><strong>Grid:</strong> 4 columns × 3 rows with precise positioning using line numbers</p>
853 </div>
854 </section>
855
856 <!-- Grid Template Areas -->
857 <section id="areas" class="section">
858 <h2 class="section-title">🗺️ Grid Template Areas</h2>
859 <div class="grid-example animate-fade-in">
860 <h3 class="example-title">Semantic Layout with Named Areas</h3>
861 <p class="example-description">
862 Grid template areas provide a visual, semantic way to define layouts using named regions.
863 </p>
864 <div class="areas-layout">
865 <div class="area-header">Header Area</div>
866 <div class="area-sidebar">Sidebar Area</div>
867 <div class="area-main">Main Content Area</div>
868 <div class="area-aside">Aside Area</div>
869 <div class="area-footer">Footer Area</div>
870 </div>
871 <p><strong>Areas:</strong> "header header header" / "sidebar main aside" / "footer footer footer"</p>
872 </div>
873 </section>
874
875 <!-- Complex Layouts -->
876 <section id="layouts" class="section">
877 <h2 class="section-title">🎨 Complex Grid Layouts</h2>
878
879 <!-- Dashboard Layout -->
880 <div class="grid-example animate-fade-in">
881 <h3 class="example-title">Dashboard Grid Layout</h3>
882 <p class="example-description">
883 A complete dashboard layout using grid template areas and precise positioning.
884 </p>
885 <div class="dashboard">
886 <div class="dash-nav">
887 <div><strong>Dashboard Navigation</strong></div>
888 <div>User Menu</div>
889 </div>
890 <div class="dash-stats-1">
891 <h4>Total Sales</h4>
892 <div style="font-size: 2rem; font-weight: bold;">$24,500</div>
893 </div>
894 <div class="dash-stats-2">
895 <h4>New Users</h4>
896 <div style="font-size: 2rem; font-weight: bold;">1,234</div>
897 </div>
898 <div class="dash-chart">
899 📊 Chart Area<br><small>Analytics Visualization</small>
900 </div>
901 <div class="dash-recent">
902 <h4>Recent Activity</h4>
903 <p>Latest updates and notifications from your dashboard.</p>
904 </div>
905 <div class="dash-tasks">
906 <h4>Task List</h4>
907 <p>Your upcoming tasks and todos organized here.</p>
908 </div>
909 <div class="dash-notifications">
910 <h4>Notifications</h4>
911 <p>Important alerts and system messages.</p>
912 </div>
913 </div>
914 </div>
915
916 <!-- Magazine Layout -->
917 <div class="grid-example animate-fade-in">
918 <h3 class="example-title">Magazine-style Layout</h3>
919 <p class="example-description">
920 Complex editorial layout with feature article, sidebar content, and bottom articles.
921 </p>
922 <div class="magazine-layout">
923 <div class="magazine-feature">
924 <h3>Feature Article</h3>
925 <p>This large featured content spans multiple columns and rows, creating visual hierarchy.</p>
926 <div style="margin-top: auto; padding-top: 1rem;">
927 <strong>Read More →</strong>
928 </div>
929 </div>
930 <div class="magazine-article-1">
931 <div><strong>Side Article 1</strong><br>Supporting content</div>
932 </div>
933 <div class="magazine-article-2">
934 <div><strong>Side Article 2</strong><br>Additional content</div>
935 </div>
936 <div class="magazine-bottom">
937 <div class="magazine-small">Small Article 1</div>
938 <div class="magazine-small">Small Article 2</div>
939 <div class="magazine-small">Small Article 3</div>
940 </div>
941 </div>
942 </div>
943 </section>
944
945 <!-- Card Grid -->
946 <section class="section">
947 <h2 class="section-title">📱 Responsive Card Grid</h2>
948 <div class="card-grid">
949 <div class="card animate-fade-in">
950 <div class="card-header">
951 <div class="card-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">🎯</div>
952 <div class="card-title">Two-Dimensional Control</div>
953 </div>
954 <div class="card-content">
955 Unlike Flexbox's one-dimensional approach, CSS Grid provides complete control over both rows and columns simultaneously.
956 </div>
957 <div class="card-footer">
958 <button class="card-button">Learn More</button>
959 </div>
960 </div>
961
962 <div class="card animate-fade-in">
963 <div class="card-header">
964 <div class="card-icon" style="background: linear-gradient(135deg, #3b82f6, #1e40af);">📐</div>
965 <div class="card-title">Precise Positioning</div>
966 </div>
967 <div class="card-content">
968 Grid line numbers and named areas give you pixel-perfect control over element placement without complex calculations.
969 </div>
970 <div class="card-footer">
971 <button class="card-button">Learn More</button>
972 </div>
973 </div>
974
975 <div class="card animate-fade-in">
976 <div class="card-header">
977 <div class="card-icon" style="background: linear-gradient(135deg, #10b981, #047857);">📱</div>
978 <div class="card-title">Responsive by Design</div>
979 </div>
980 <div class="card-content">
981 Auto-fit, minmax, and fr units create responsive layouts that adapt beautifully without media queries.
982 </div>
983 <div class="card-footer">
984 <button class="card-button">Learn More</button>
985 </div>
986 </div>
987 </div>
988 </section>
989
990 <!-- Summary Section -->
991 <section class="section" style="text-align: center;">
992 <h2 class="section-title">🎉 CSS Grid Mastery Achieved!</h2>
993 <div style="background: white; border-radius: 16px; padding: 3rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
994 <p style="font-size: 1.2rem; margin-bottom: 2rem; color: #64748b;">
995 You've mastered the most sophisticated layout system in CSS!
996 </p>
997
998 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0;">
999 <div style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 1rem 1.5rem; border-radius: 12px;">
1000 <strong>✅ Grid Container</strong><br>
1001 <small>Template Columns/Rows, Gap</small>
1002 </div>
1003 <div style="background: linear-gradient(135deg, #3b82f6, #1e40af); color: white; padding: 1rem 1.5rem; border-radius: 12px;">
1004 <strong>✅ Line Positioning</strong><br>
1005 <small>Precise Item Placement</small>
1006 </div>
1007 <div style="background: linear-gradient(135deg, #10b981, #047857); color: white; padding: 1rem 1.5rem; border-radius: 12px;">
1008 <strong>✅ Template Areas</strong><br>
1009 <small>Semantic Layout Design</small>
1010 </div>
1011 <div style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white; padding: 1rem 1.5rem; border-radius: 12px;">
1012 <strong>✅ Complex Layouts</strong><br>
1013 <small>Dashboard, Magazine, Cards</small>
1014 </div>
1015 </div>
1016 </div>
1017 </section>
1018 </div>
1019 </main>
1020
1021 <!-- Page Footer -->
1022 <footer class="page-footer">
1023 <div class="container">
1024 <p>© 2024 CSS Grid Master. Built with CSS Grid Layout System.</p>
1025 </div>
1026 </footer>
1027 </div>
1028
1029 <script>
1030 // Add intersection observer for animations
1031 const observerOptions = {
1032 threshold: 0.1,
1033 rootMargin: '0px 0px -50px 0px'
1034 };
1035
1036 const observer = new IntersectionObserver((entries) => {
1037 entries.forEach(entry => {
1038 if (entry.isIntersecting) {
1039 entry.target.style.opacity = '1';
1040 entry.target.style.transform = 'translateY(0)';
1041 }
1042 });
1043 }, observerOptions);
1044
1045 // Observe all animated elements
1046 document.querySelectorAll('.animate-fade-in').forEach(el => {
1047 el.style.opacity = '0';
1048 el.style.transform = 'translateY(20px)';
1049 el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
1050 observer.observe(el);
1051 });
1052
1053 // Add smooth scrolling
1054 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1055 anchor.addEventListener('click', function (e) {
1056 e.preventDefault();
1057 const target = document.querySelector(this.getAttribute('href'));
1058 if (target) {
1059 target.scrollIntoView({
1060 behavior: 'smooth',
1061 block: 'start'
1062 });
1063 }
1064 });
1065 });
1066 </script>
1067</body>
1068</html>This comprehensive CSS Grid demonstration covers all essential concepts from Lesson 8:
🏗️ Complete Grid Foundation Mastery:
📍 Precise Positioning Techniques:
🗺️ Grid Template Areas System:
🎨 Advanced Layout Applications:
📱 Responsive Design Integration:
This example demonstrates how CSS Grid provides unprecedented control over two-dimensional layouts, making complex designs intuitive while maintaining responsive behavior across all devices.
Outstanding work mastering CSS Grid! You now have complete control over sophisticated two-dimensional layouts. Next, we'll explore "Responsive Design Foundations" where you'll learn to create layouts that adapt beautifully across all devices using media queries, flexible units, and mobile-first design principles. Get ready to build truly responsive interfaces!
Your progress is saved in this browser, on this device only.