CSS Grid: Complete Guide to Advanced Grid Layout and Two-Dimensional Control
Professional Guide by Alaa Amer – Expert Web Developer & Designer
CSS Grid is the most powerful layout system for controlling rows and columns. Learn to create complex and responsive layouts with high precision.
1️⃣ Grid Fundamentals
Creating a Grid Container
.grid-container {
display: grid; /* Convert element to grid container */
/* Or for inline elements */
display: inline-grid;
}
/* Basic grid definition */
.basic-grid {
display: grid;
grid-template-columns: 200px 1fr 100px; /* 3 columns */
grid-template-rows: auto 1fr auto; /* 3 rows */
gap: 20px;
min-height: 100vh;
}
Special Grid Units
.grid-units {
display: grid;
/* fr unit - flexible fraction */
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 ratio */
/* repeat unit */
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsive */
/* minmax unit */
grid-template-columns: minmax(200px, 1fr) 300px;
/* auto unit */
grid-template-columns: auto 1fr auto; /* based on content */
}
2️⃣ Defining Columns and Rows
.grid-definition {
display: grid;
/* Column definition */
grid-template-columns:
200px /* fixed column */
1fr /* flexible column */
minmax(100px, 200px) /* column with min and max */
auto; /* content-based */
/* Row definition */
grid-template-rows:
60px /* fixed header */
1fr /* flexible content */
50px; /* fixed footer */
/* Definition using line names */
grid-template-columns:
[sidebar-start] 250px
[sidebar-end main-start] 1fr
[main-end aside-start] 200px
[aside-end];
}
/* Advanced examples */
.responsive-columns {
display: grid;
/* Responsive grid */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
.magazine-layout {
display: grid;
grid-template-columns:
1fr /* main content */
300px /* sidebar */
200px; /* ads */
grid-template-rows:
80px /* header */
1fr /* content */
60px; /* footer */
gap: 20px;
min-height: 100vh;
}
3️⃣ Placing Items in the Grid
/* Positioning items with numbers */
.grid-positioning {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.item-1 {
grid-column: 1 / 3; /* from column 1 to 3 */
grid-row: 1 / 2; /* first row */
}
.item-2 {
grid-column: 3 / 5; /* from column 3 to 5 */
grid-row: 1 / 3; /* from row 1 to 3 */
}
/* Using span */
.item-3 {
grid-column: span 2; /* spans 2 columns */
grid-row: span 1; /* spans 1 row */
}
/* Comprehensive shorthand */
.item-4 {
grid-area: 2 / 1 / 4 / 3; /* row-start / col-start / row-end / col-end */
}
/* Positioning using line names */
.named-lines-grid {
display: grid;
grid-template-columns:
[sidebar-start] 250px
[sidebar-end content-start] 1fr
[content-end];
grid-template-rows:
[header-start] 80px
[header-end main-start] 1fr
[main-end];
}
.sidebar-item {
grid-column: sidebar-start / sidebar-end;
grid-row: main-start / main-end;
}
4️⃣ Grid Areas - Named Areas
.layout-areas {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 150px;
grid-template-rows: 80px 1fr 60px;
gap: 20px;
min-height: 100vh;
}
/* Assigning elements to areas */
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
/* Responsive layout by changing areas */
@media (max-width: 768px) {
.layout-areas {
grid-template-areas:
"header"
"main"
"sidebar"
"aside"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
}
}
/* Complex magazine layout */
.magazine-areas {
display: grid;
grid-template-areas:
"header header header header"
"hero hero sidebar-1 sidebar-1"
"article-1 article-2 sidebar-1 sidebar-1"
"article-3 article-3 sidebar-2 ads"
"footer footer footer footer";
grid-template-columns: 1fr 1fr 200px 150px;
gap: 20px;
}
5️⃣ Grid Alignment
.grid-alignment {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(3, 100px);
gap: 10px;
/* Align entire grid within container */
justify-content: center; /* horizontal */
align-content: center; /* vertical */
/* Or */
place-content: center; /* shorthand for both */
/* Content distribution */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
/* Align items within their cells */
justify-items: center; /* horizontal */
align-items: center; /* vertical */
place-items: center; /* shorthand for both */
}
/* Align single item */
.special-grid-item {
justify-self: end; /* horizontal */
align-self: start; /* vertical */
place-self: center; /* shorthand for both */
}
/* Practical example - aligned cards */
.cards-grid-aligned {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
align-items: start; /* all cards from top */
}
.card-content-centered {
display: grid;
place-items: center; /* center content */
min-height: 200px;
text-align: center;
}
6️⃣ Advanced Responsive Grid
/* Fully responsive grid */
.responsive-advanced-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
/* Different layouts for screens */
.adaptive-layout {
display: grid;
gap: 20px;
/* Large screens */
grid-template-columns: 250px 1fr 200px;
grid-template-areas:
"sidebar main aside"
"sidebar main aside";
}
@media (max-width: 1024px) {
.adaptive-layout {
/* Medium screens */
grid-template-columns: 200px 1fr;
grid-template-areas:
"sidebar main"
"aside aside";
}
}
@media (max-width: 768px) {
.adaptive-layout {
/* Small screens */
grid-template-columns: 1fr;
grid-template-areas:
"main"
"sidebar"
"aside";
}
}
/* Grid with different density */
.density-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 15px;
}
.featured-item {
grid-column: span 6; /* half width */
}
.regular-item {
grid-column: span 4; /* third width */
}
.small-item {
grid-column: span 3; /* quarter width */
}
@media (max-width: 768px) {
.featured-item,
.regular-item,
.small-item {
grid-column: span 12; /* full width on mobile */
}
}
7️⃣ Practical Project: Advanced Dashboard
The HTML and CSS remain structurally the same as the Arabic version, with appropriate text direction and language adjustments for English.
Summary
In this lesson we learned:
✅ CSS Grid fundamentals ✅ Advanced column and row definition ✅ Item placement and named areas ✅ Grid alignment ✅ Responsive design with Grid ✅ Advanced dashboard project
In the next lesson we'll study Position and Positioning for precise element positioning control.