Master individual grid item positioning, spanning, and advanced CSS Grid features. Learn to create complex layouts with precision control.
While grid containers define the overall structure, grid items give you precise control over individual element placement. CSS Grid's item-level properties allow you to create sophisticated, asymmetric layouts that would be impossible with other CSS layout methods.
Understanding grid item positioning is key to unlocking CSS Grid's full potential. You can place items anywhere in the grid, span them across multiple tracks, and even overlap them for creative design effects.
This lesson will teach you the advanced techniques used by professional developers to create complex, responsive grid layouts.
Position individual grid items using grid-column and grid-row properties.
Basic Positioning:
1.grid-item {
2 grid-column: 2; /* Place in column 2 */
3 grid-row: 1; /* Place in row 1 */
4}Spanning Multiple Tracks:
1.spanning-item {
2 grid-column: 1 / 3; /* Span from column 1 to 3 */
3 grid-row: 2 / 4; /* Span from row 2 to 4 */
4}Using Span Keyword:
1.span-item {
2 grid-column: span 2; /* Span 2 columns */
3 grid-row: span 3; /* Span 3 rows */
4}Shorthand Properties:
1.shorthand-item {
2 grid-area: 1 / 2 / 3 / 4; /* row-start / col-start / row-end / col-end */
3}Explore powerful CSS Grid features for complex layouts.
Implicit Grids:
1.auto-grid {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 grid-auto-rows: 200px; /* Size for implicit rows */
5 grid-auto-flow: row dense; /* Auto-placement algorithm */
6}Grid Auto-Placement:
1.auto-flow {
2 grid-auto-flow: column; /* Place items in columns first */
3 grid-auto-flow: dense; /* Fill gaps with smaller items */
4}Minimum and Maximum Sizing:
1.responsive-grid {
2 display: grid;
3 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4 grid-auto-rows: minmax(200px, auto);
5}Grid Item Alignment:
1.aligned-item {
2 justify-self: center; /* Horizontal alignment within cell */
3 align-self: end; /* Vertical alignment within cell */
4}Create professional layout patterns using advanced grid techniques.
Magazine Layout:
1.magazine-grid {
2 display: grid;
3 grid-template-columns: repeat(6, 1fr);
4 grid-template-rows: repeat(4, 200px);
5 gap: 20px;
6}
7
8.feature-article {
9 grid-column: 1 / 4;
10 grid-row: 1 / 3;
11}
12
13.sidebar {
14 grid-column: 4 / 7;
15 grid-row: 1 / 5;
16}Dashboard Layout:
1.dashboard {
2 display: grid;
3 grid-template-columns: 250px 1fr 300px;
4 grid-template-rows: 60px 1fr 40px;
5 grid-template-areas:
6 "sidebar header toolbar"
7 "sidebar main toolbar"
8 "footer footer footer";
9}Overlapping Items:
1.overlay-item {
2 grid-column: 2 / 4;
3 grid-row: 2 / 3;
4 z-index: 2; /* Control stacking order */
5}Master grid item positioning with an interactive dashboard layout. Control individual item placement, spanning, and alignment.
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>Advanced Grid Items & Positioning</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
16 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17 padding: 20px;
18 color: #333;
19 }
20
21 .container {
22 max-width: 1200px;
23 margin: 0 auto;
24 background: white;
25 border-radius: 16px;
26 padding: 30px;
27 box-shadow: 0 20px 40px rgba(0,0,0,0.1);
28 }
29
30 h1 {
31 text-align: center;
32 color: #2d3748;
33 margin-bottom: 30px;
34 font-size: 2.5rem;
35 }
36
37 .dashboard {
38 display: grid;
39 grid-template-columns: repeat(6, 1fr);
40 grid-template-rows: repeat(4, 150px);
41 gap: 15px;
42 margin-bottom: 30px;
43 padding: 20px;
44 background: #f8fafc;
45 border-radius: 12px;
46 border: 2px solid #e2e8f0;
47 }
48
49 .grid-item {
50 background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
51 border-radius: 8px;
52 padding: 20px;
53 color: white;
54 display: flex;
55 flex-direction: column;
56 justify-content: center;
57 align-items: center;
58 font-weight: 600;
59 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
60 transition: transform 0.3s ease, box-shadow 0.3s ease;
61 }
62
63 .grid-item:hover {
64 transform: translateY(-2px);
65 box-shadow: 0 8px 20px rgba(0,0,0,0.2);
66 }
67
68 /* Specific item styles */
69 .header {
70 grid-column: 1 / 7;
71 grid-row: 1;
72 background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
73 }
74
75 .sidebar {
76 grid-column: 1 / 3;
77 grid-row: 2 / 5;
78 background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
79 }
80
81 .main-content {
82 grid-column: 3 / 6;
83 grid-row: 2 / 4;
84 background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
85 }
86
87 .widget1 {
88 grid-column: 6;
89 grid-row: 2;
90 background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
91 }
92
93 .widget2 {
94 grid-column: 6;
95 grid-row: 3;
96 background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
97 }
98
99 .stats {
100 grid-column: 3 / 5;
101 grid-row: 4;
102 background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
103 }
104
105 .actions {
106 grid-column: 5 / 7;
107 grid-row: 4;
108 background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
109 }
110
111 .controls {
112 display: grid;
113 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
114 gap: 20px;
115 background: #edf2f7;
116 padding: 25px;
117 border-radius: 12px;
118 margin-bottom: 20px;
119 }
120
121 .control-group {
122 background: white;
123 padding: 20px;
124 border-radius: 8px;
125 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
126 }
127
128 .control-group h3 {
129 color: #2d3748;
130 margin-bottom: 15px;
131 font-size: 1.1rem;
132 }
133
134 .control-row {
135 display: flex;
136 align-items: center;
137 gap: 10px;
138 margin-bottom: 10px;
139 }
140
141 label {
142 font-weight: 500;
143 color: #4a5568;
144 min-width: 80px;
145 }
146
147 select, input, button {
148 padding: 8px 12px;
149 border: 1px solid #cbd5e0;
150 border-radius: 4px;
151 font-size: 14px;
152 }
153
154 button {
155 background: #4299e1;
156 color: white;
157 border: none;
158 cursor: pointer;
159 transition: background 0.3s ease;
160 }
161
162 button:hover {
163 background: #3182ce;
164 }
165
166 .code-display {
167 background: #2d3748;
168 color: #a0aec0;
169 padding: 20px;
170 border-radius: 8px;
171 font-family: 'Fira Code', monospace;
172 font-size: 14px;
173 line-height: 1.5;
174 overflow-x: auto;
175 }
176
177 .highlight {
178 color: #68d391;
179 font-weight: bold;
180 }
181 </style>
182</head>
183<body>
184 <div class="container">
185 <h1>🎯 Advanced Grid Items & Positioning</h1>
186
187 <div class="controls">
188 <div class="control-group">
189 <h3>📍 Item Positioning</h3>
190 <div class="control-row">
191 <label>Item:</label>
192 <select id="selectedItem">
193 <option value="main-content">Main Content</option>
194 <option value="sidebar">Sidebar</option>
195 <option value="widget1">Widget 1</option>
196 <option value="widget2">Widget 2</option>
197 </select>
198 </div>
199 <div class="control-row">
200 <label>Column:</label>
201 <input type="text" id="columnPos" value="3 / 6" placeholder="e.g., 1 / 3">
202 </div>
203 <div class="control-row">
204 <label>Row:</label>
205 <input type="text" id="rowPos" value="2 / 4" placeholder="e.g., 1 / 2">
206 </div>
207 <button onclick="updatePosition()">Update Position</button>
208 </div>
209
210 <div class="control-group">
211 <h3>🎨 Item Alignment</h3>
212 <div class="control-row">
213 <label>Justify:</label>
214 <select id="justifySelf">
215 <option value="stretch">Stretch</option>
216 <option value="start">Start</option>
217 <option value="center">Center</option>
218 <option value="end">End</option>
219 </select>
220 </div>
221 <div class="control-row">
222 <label>Align:</label>
223 <select id="alignSelf">
224 <option value="stretch">Stretch</option>
225 <option value="start">Start</option>
226 <option value="center">Center</option>
227 <option value="end">End</option>
228 </select>
229 </div>
230 <button onclick="updateAlignment()">Update Alignment</button>
231 </div>
232
233 <div class="control-group">
234 <h3>📏 Grid Structure</h3>
235 <div class="control-row">
236 <label>Columns:</label>
237 <input type="number" id="gridCols" value="6" min="3" max="8">
238 </div>
239 <div class="control-row">
240 <label>Rows:</label>
241 <input type="number" id="gridRows" value="4" min="3" max="6">
242 </div>
243 <button onclick="updateGridSize()">Update Grid</button>
244 </div>
245 </div>
246
247 <div class="dashboard" id="dashboard">
248 <div class="grid-item header">
249 <h2>📊 Dashboard Header</h2>
250 <p>Main navigation and branding</p>
251 </div>
252 <div class="grid-item sidebar">
253 <h3>📁 Sidebar</h3>
254 <p>Navigation menu and quick actions</p>
255 </div>
256 <div class="grid-item main-content">
257 <h3>📈 Main Content</h3>
258 <p>Primary dashboard content area</p>
259 </div>
260 <div class="grid-item widget1">
261 <h3>⚡ Widget 1</h3>
262 <p>Stats & metrics</p>
263 </div>
264 <div class="grid-item widget2">
265 <h3>🎯 Widget 2</h3>
266 <p>Quick actions</p>
267 </div>
268 <div class="grid-item stats">
269 <h3>📊 Statistics</h3>
270 <p>Analytics overview</p>
271 </div>
272 <div class="grid-item actions">
273 <h3>🔧 Actions</h3>
274 <p>Control panel</p>
275 </div>
276 </div>
277
278 <div class="code-display" id="codeDisplay">
279/* Current Grid Item Properties */
280.main-content {
281 grid-column: <span class="highlight">3 / 6</span>;
282 grid-row: <span class="highlight">2 / 4</span>;
283 justify-self: <span class="highlight">stretch</span>;
284 align-self: <span class="highlight">stretch</span>;
285}
286 </div>
287 </div>
288
289 <script>
290 function updatePosition() {
291 const item = document.getElementById('selectedItem').value;
292 const column = document.getElementById('columnPos').value;
293 const row = document.getElementById('rowPos').value;
294
295 const element = document.querySelector('.' + item);
296 if (element) {
297 element.style.gridColumn = column;
298 element.style.gridRow = row;
299 updateCodeDisplay();
300 }
301 }
302
303 function updateAlignment() {
304 const item = document.getElementById('selectedItem').value;
305 const justify = document.getElementById('justifySelf').value;
306 const align = document.getElementById('alignSelf').value;
307
308 const element = document.querySelector('.' + item);
309 if (element) {
310 element.style.justifySelf = justify;
311 element.style.alignSelf = align;
312 updateCodeDisplay();
313 }
314 }
315
316 function updateGridSize() {
317 const cols = document.getElementById('gridCols').value;
318 const rows = document.getElementById('gridRows').value;
319 const dashboard = document.getElementById('dashboard');
320
321 dashboard.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
322 dashboard.style.gridTemplateRows = 'repeat(' + rows + ', 150px)';
323 }
324
325 function updateCodeDisplay() {
326 const item = document.getElementById('selectedItem').value;
327 const element = document.querySelector('.' + item);
328 const codeDisplay = document.getElementById('codeDisplay');
329
330 if (element) {
331 const column = element.style.gridColumn || '3 / 6';
332 const row = element.style.gridRow || '2 / 4';
333 const justify = element.style.justifySelf || 'stretch';
334 const align = element.style.alignSelf || 'stretch';
335
336 codeDisplay.innerHTML =
337 '/* Current Grid Item Properties */\n' +
338 '.' + item + ' {\n' +
339 ' grid-column: <span class="highlight">' + column + '</span>;\n' +
340 ' grid-row: <span class="highlight">' + row + '</span>;\n' +
341 ' justify-self: <span class="highlight">' + justify + '</span>;\n' +
342 ' align-self: <span class="highlight">' + align + '</span>;\n' +
343 '}';
344 }
345 }
346
347 document.getElementById('selectedItem').addEventListener('change', updateCodeDisplay);
348 updateCodeDisplay();
349 </script>
350</body>
351</html>This advanced demo demonstrates CSS Grid's powerful item positioning capabilities:
🎯 Grid Item Positioning:
🔧 Advanced Features Showcased:
📊 Professional Layout Pattern:
This dashboard layout demonstrates real-world grid usage with:
💡 Key Techniques:
This represents the power of CSS Grid for creating sophisticated, maintainable layouts that would be difficult with other CSS layout methods.
Outstanding work! You now have complete control over both grid containers and individual grid items. Next, we'll explore Grid Template Areas & Naming, where you'll learn to create semantic, maintainable layouts using named grid areas. This approach makes complex layouts more readable and easier to manage in large projects.
Your progress is saved in this browser, on this device only.