CSS Tutorial
20 Topics- CSS Tutorial Overview
- CSS Introduction
- CSS Fundamentals
- CSS Selectors
- CSS Colors & Backgrounds
- CSS Text & Fonts
- CSS Box Model
- CSS Display & Positioning
- CSS Flexbox
- CSS Grid
- CSS Sizing & Layout
- CSS Lists & Tables
- CSS Transitions & Animations
- CSS Responsive Design
- CSS Advanced Styling
- CSS Functions
- CSS for Accessibility & Print
- CSS Architecture & Methodologies
- CSS Preprocessors & Tools
- CSS Modern & Experimental CSS
CSS Grid Layout Architecture
The most powerful layout system in CSS: simultaneously coordinate rows and columns, build zero-breakpoint responsive grids with auto-fit, and define visual page scaffolds with grid-template-areas.
1. Grid Container & Grid Tracks (Columns & Rows)
Declaring display: grid on an element transforms it into a grid container and all of its direct children into grid items.
Unlike Flexbox (which is 1-dimensional and aligns items along a single axis), CSS Grid is 2-dimensional: you declare both rows and columns simultaneously:
grid-template-columns: Defines the width of each vertical column track.grid-template-rows: Defines the height of each horizontal row track.gap(orrow-gap/column-gap): Sets the gutters between tracks.
CSS Example
/* Basic 3-column Grid */
.basic-grid {
display: grid;
grid-template-columns: 120px 1fr 120px;
grid-template-rows: 60px 100px;
gap: 12px;
background: #f8fafc;
padding: 12px;
border-radius: 8px;
}
.grid-cell {
background: #3b82f6;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 4px;
}2. The Fractional Unit (fr) & repeat() Notation
The fr unit represents a fraction of the free remaining space inside the grid container:
grid-template-columns: 200px 1fr 2fr; inside a 1100px container, the browser allocates 200px to column 1. The remaining 900px is divided into 3 equal portions (1fr + 2fr = 3fr, so 1fr = 300px). Column 2 receives 300px, and Column 3 receives 600px!Use repeat(count, track-definition) to avoid tedious repetition: repeat(4, 1fr) creates 4 equal columns.
3. Responsive Cards with minmax(): auto-fit vs. auto-fill
This single line of CSS creates an entirely responsive, auto-wrapping grid that works on everything from 320px mobile screens to 4K ultra-wide monitors without requiring a single media query:
/* The Ultimate Responsive Grid Pattern */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| Keyword | Behavior When Fewer Items Than Space | Best Use Case |
|---|---|---|
auto-fit | Collapses empty tracks to 0px, allowing existing items to stretch and fill all remaining width. | Card layouts, photo galleries, product listings (recommended 95% of the time). |
auto-fill | Creates empty invisible tracks to fill the row, keeping existing items locked at their minmax floor. | Fixed-width card boards where cards must preserve rigid column slots. |
CSS Example
/* Live auto-fit minmax responsive grid */
.autofit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
background: #f1f5f9;
padding: 12px;
border-radius: 8px;
}
.autofit-card {
background: #10b981;
color: white;
padding: 16px;
border-radius: 6px;
text-align: center;
font-weight: 600;
}4. Named Visual Layouts: grid-template-areas
grid-template-areas allows developers to describe page layouts as an ASCII art diagram directly in CSS:
CSS Example
/* Page scaffolding with named areas */
.page-scaffold {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 140px 1fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
min-height: 220px;
background: #f8fafc;
padding: 10px;
}
.header-area { grid-area: header; background: #3b82f6; color: white; padding: 12px; }
.sidebar-area { grid-area: sidebar; background: #64748b; color: white; padding: 12px; }
.content-area { grid-area: content; background: #ffffff; border: 1px solid #cbd5e1; padding: 12px; }
.footer-area { grid-area: footer; background: #1e293b; color: white; padding: 8px; }5. Frequently Asked Questions (FAQ)
min-width: auto, which resolves to min-content. If a long URL or code string cannot wrap, the grid column expands past 1fr to accommodate it. To fix this, apply min-width: 0 on the grid item or define the track as minmax(0, 1fr).grid-column: 1 / -1 instructs an item to span from line 1 all the way across to the final line (-1 represents the last line), making full-bleed rows effortless.Explore Related Tools
Hand-picked utilities and calculators related to this tool.
