CSS Grid Layout
CSS Grid Layout
Table of Contents
CSS Grid Layout – Creating Complex Grids
1. Basics of CSS Grid
6. Nested Grids
Conclusion
Page 2 of 7
Here's a well-structured, easy-to-follow explanation of CSS Grid Layout, covering key concepts
with syntax, examples, and references.
css
.container {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 columns of 200px each */
grid-template-rows: 100px 100px; /* 2 rows of 100px each */
}
.container {
display: grid;
grid-template: 100px 100px / 200px 200px 200px; /* Rows first, then columns */
}
✅ Reference:
🔗 MDN - CSS Grid Layout
🔗 W3Schools - CSS Grid
css
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 200px;
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
}
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
✅ Reference:
🔗 CSS Tricks - A Complete Guide to Grid
.item {
grid-column: 2 / 4; /* Starts at column 2, ends at column 4 */
grid-row: 1 / 3; /* Starts at row 1, ends at row 3 */
}
.item {
grid-column: span 2; /* Spans across 2 columns */
grid-row: span 2; /* Spans across 2 rows */
}
✅ Reference:
🔗 MDN - Placing Items in Grid
css
.container {
display: grid;
grid-template-columns: [start] 1fr [middle] 2fr [end];
}
.item {
grid-column: start / middle; /* Uses named grid lines */
}
6. Nested Grids
A grid item can also be a grid container.
css
.parent {
display: grid;
Page 5 of 7
grid-template-columns: repeat(3, 1fr);
}
.child {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
css
.parent {
display: grid;
grid-template-columns: 1fr 2fr;
}
.child {
display: grid;
grid: subgrid;
}
✅ Reference:
🔗 MDN - Subgrid
body {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
Page 6 of 7
grid-column: 1 / -1; /* Spans all columns */
}
main {
grid-column: 2;
}
aside {
grid-column: 1;
}
✅ Reference:
🔗 CSS Tricks - Grid Examples
✅ Tip: Use Grid for page layouts and Flexbox for smaller components.
css
.container {
display: grid;
Page 7 of 7
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
Conclusion
powerful and eliminates layout hacks.
CSS Grid is
Use fr units, repeat(), span, and grid gaps effectively.
Flexbox & Grid work well together for modern layouts.
✅ More Learning Resources:
🔗 MDN CSS Grid
🔗 W3Schools CSS Grid
🔗 CSS Tricks Grid Guide