Learn CSS Grid container fundamentals for two-dimensional layout control. Master grid templates, grid gaps, grid areas, and implicit grids.
CSS Grid is the most powerful layout system available in CSS. It allows you to create complex two-dimensional layouts with unprecedented control and flexibility. Unlike Flexbox, which is primarily one-dimensional, CSS Grid excels at both rows and columns simultaneously.
The grid container (parent element) defines the grid context and controls how child elements (grid items) are positioned. Understanding grid container properties is essential for mastering modern CSS layouts.
In this lesson, you'll learn the fundamental properties that transform any element into a grid container and give you complete control over your layout structure.
Transform any element into a grid container using the display property.
Basic Grid Container:
1.grid-container {
2 display: grid;
3}Inline Grid Container:
1.inline-grid {
2 display: inline-grid;
3}Key Differences:
display: grid - Block-level grid containerdisplay: inline-grid - Inline-level grid containerOnce you set display: grid, all direct children become grid items and can be positioned using grid properties.
Define the structure of your grid using grid-template-columns and grid-template-rows.
Fixed Sizes:
1.grid {
2 display: grid;
3 grid-template-columns: 200px 200px 200px;
4 grid-template-rows: 100px 100px;
5}Flexible Units (fr):
1.flexible-grid {
2 display: grid;
3 grid-template-columns: 1fr 2fr 1fr;
4 grid-template-rows: 200px 1fr;
5}Repeat Function:
1.repeat-grid {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 grid-template-rows: repeat(2, 150px);
5}Mixed Units:
1.mixed-grid {
2 display: grid;
3 grid-template-columns: 200px 1fr 100px;
4 grid-template-rows: auto 1fr auto;
5}The fr unit represents a fraction of the available space, making grids truly flexible and responsive.
Control spacing and alignment within your grid container.
Grid Gap:
1.spaced-grid {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 20px; /* Row and column gap */
5
6 /* Or specify separately */
7 row-gap: 20px;
8 column-gap: 30px;
9}Grid Container Alignment:
1.centered-grid {
2 display: grid;
3 grid-template-columns: repeat(3, 200px);
4 justify-content: center; /* Horizontal alignment */
5 align-content: center; /* Vertical alignment */
6 height: 100vh;
7}Alignment Values:
start, end, centerstretch (default)space-around, space-between, space-evenlyExplore CSS Grid container properties with live controls. Adjust columns, rows, gaps, and alignment to understand how grid containers work.
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 Container Properties Demo</title>
7 <style>
8 body {
9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10 margin: 0;
11 padding: 20px;
12 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13 color: #333;
14 }
15
16 .demo-container {
17 background: white;
18 border-radius: 12px;
19 padding: 30px;
20 box-shadow: 0 10px 30px rgba(0,0,0,0.2);
21 max-width: 1200px;
22 margin: 0 auto;
23 }
24
25 h1 {
26 text-align: center;
27 color: #4a5568;
28 margin-bottom: 30px;
29 font-size: 2.5em;
30 }
31
32 .controls {
33 background: #f7fafc;
34 padding: 20px;
35 border-radius: 8px;
36 margin-bottom: 30px;
37 display: grid;
38 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
39 gap: 15px;
40 }
41
42 .control-group {
43 display: flex;
44 flex-direction: column;
45 }
46
47 label {
48 font-weight: 600;
49 margin-bottom: 5px;
50 color: #2d3748;
51 }
52
53 select, input[type="range"] {
54 padding: 8px;
55 border: 1px solid #cbd5e0;
56 border-radius: 4px;
57 font-size: 14px;
58 }
59
60 .grid-playground {
61 display: grid;
62 grid-template-columns: repeat(3, 1fr);
63 grid-template-rows: repeat(2, 150px);
64 gap: 20px;
65 padding: 20px;
66 border: 3px solid #4299e1;
67 border-radius: 8px;
68 background: #ebf8ff;
69 min-height: 400px;
70 }
71
72 .grid-item {
73 background: linear-gradient(45deg, #4299e1, #3182ce);
74 color: white;
75 display: flex;
76 align-items: center;
77 justify-content: center;
78 font-weight: bold;
79 font-size: 18px;
80 border-radius: 6px;
81 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
82 transition: transform 0.3s ease;
83 }
84
85 .grid-item:hover {
86 transform: scale(1.05);
87 }
88
89 .grid-info {
90 margin-top: 20px;
91 padding: 15px;
92 background: #f0fff4;
93 border-left: 4px solid #48bb78;
94 border-radius: 4px;
95 }
96
97 .property-display {
98 font-family: monospace;
99 background: #2d3748;
100 color: #a0aec0;
101 padding: 15px;
102 border-radius: 6px;
103 margin-top: 10px;
104 white-space: pre-wrap;
105 }
106
107 .highlight {
108 color: #68d391;
109 font-weight: bold;
110 }
111 </style>
112</head>
113<body>
114 <div class="demo-container">
115 <h1>🎯 CSS Grid Container Properties</h1>
116
117 <div class="controls">
118 <div class="control-group">
119 <label for="columns">Grid Template Columns:</label>
120 <select id="columns">
121 <option value="repeat(3, 1fr)">3 Equal Columns</option>
122 <option value="200px 1fr 200px">Fixed-Flexible-Fixed</option>
123 <option value="repeat(4, 1fr)">4 Equal Columns</option>
124 <option value="1fr 2fr 1fr">1fr 2fr 1fr</option>
125 <option value="repeat(2, minmax(200px, 1fr))">2 Responsive Columns</option>
126 </select>
127 </div>
128
129 <div class="control-group">
130 <label for="rows">Grid Template Rows:</label>
131 <select id="rows">
132 <option value="repeat(2, 150px)">2 Rows (150px)</option>
133 <option value="100px 1fr">Fixed + Flexible</option>
134 <option value="repeat(3, 100px)">3 Rows (100px)</option>
135 <option value="auto 200px auto">Auto-Fixed-Auto</option>
136 </select>
137 </div>
138
139 <div class="control-group">
140 <label for="gap">Gap: <span id="gap-value">20px</span></label>
141 <input type="range" id="gap" min="0" max="50" value="20">
142 </div>
143
144 <div class="control-group">
145 <label for="justify">Justify Content:</label>
146 <select id="justify">
147 <option value="stretch">Stretch</option>
148 <option value="start">Start</option>
149 <option value="center">Center</option>
150 <option value="end">End</option>
151 <option value="space-between">Space Between</option>
152 <option value="space-around">Space Around</option>
153 <option value="space-evenly">Space Evenly</option>
154 </select>
155 </div>
156
157 <div class="control-group">
158 <label for="align">Align Content:</label>
159 <select id="align">
160 <option value="stretch">Stretch</option>
161 <option value="start">Start</option>
162 <option value="center">Center</option>
163 <option value="end">End</option>
164 <option value="space-between">Space Between</option>
165 <option value="space-around">Space Around</option>
166 <option value="space-evenly">Space Evenly</option>
167 </select>
168 </div>
169 </div>
170
171 <div class="grid-playground" id="playground">
172 <div class="grid-item">Item 1</div>
173 <div class="grid-item">Item 2</div>
174 <div class="grid-item">Item 3</div>
175 <div class="grid-item">Item 4</div>
176 <div class="grid-item">Item 5</div>
177 <div class="grid-item">Item 6</div>
178 </div>
179
180 <div class="grid-info">
181 <h3>📋 Current Grid Properties:</h3>
182 <div class="property-display" id="css-output">
183display: grid;
184grid-template-columns: repeat(3, 1fr);
185grid-template-rows: repeat(2, 150px);
186gap: 20px;
187justify-content: stretch;
188align-content: stretch;
189 </div>
190 </div>
191 </div>
192
193 <script>
194 function updateGrid() {
195 const playground = document.getElementById('playground');
196 const cssOutput = document.getElementById('css-output');
197
198 const columns = document.getElementById('columns').value;
199 const rows = document.getElementById('rows').value;
200 const gap = document.getElementById('gap').value + 'px';
201 const justify = document.getElementById('justify').value;
202 const align = document.getElementById('align').value;
203
204 playground.style.gridTemplateColumns = columns;
205 playground.style.gridTemplateRows = rows;
206 playground.style.gap = gap;
207 playground.style.justifyContent = justify;
208 playground.style.alignContent = align;
209
210 document.getElementById('gap-value').textContent = gap;
211
212 cssOutput.innerHTML =
213 'display: <span class="highlight">grid</span>;\n' +
214 'grid-template-columns: <span class="highlight">' + columns + '</span>;\n' +
215 'grid-template-rows: <span class="highlight">' + rows + '</span>;\n' +
216 'gap: <span class="highlight">' + gap + '</span>;\n' +
217 'justify-content: <span class="highlight">' + justify + '</span>;\n' +
218 'align-content: <span class="highlight">' + align + '</span>;';
219 }
220
221 document.addEventListener('DOMContentLoaded', function() {
222 const controls = ['columns', 'rows', 'gap', 'justify', 'align'];
223 controls.forEach(id => {
224 document.getElementById(id).addEventListener('change', updateGrid);
225 document.getElementById(id).addEventListener('input', updateGrid);
226 });
227
228 updateGrid();
229 });
230 </script>
231</body>
232</html>This interactive demo showcases CSS Grid container fundamentals:
🎯 Grid Container Properties Covered:
display: grid - Creates the grid formatting contextgrid-template-columns - Defines column structure with various unitsgrid-template-rows - Defines row structure and sizinggap - Controls spacing between grid itemsjustify-content & align-content - Aligns the entire grid within its container💡 Key Learning Points:
fr unit distributes available space proportionallyrepeat(3, 1fr) creates three equal columns efficientlypx), flexible (fr), and auto-sizingminmax() and fr units for adaptable layouts🔧 Interactive Features:
This foundation is essential for creating sophisticated grid-based layouts in modern web development.
Great progress! You've mastered CSS Grid container properties and can create flexible grid structures. Next, we'll explore Grid Items & Advanced Grid Features, where you'll learn to position individual items, create complex layouts with grid areas, and handle grid overflow. This will complete your grid layout toolkit!
Your progress is saved in this browser, on this device only.