Introduction
CSS Grid is the most powerful layout system available in CSS. Unlike Flexbox, which is one-dimensional (either rows or columns), Grid is two-dimensional, allowing you to control both rows and columns simultaneously. Grid excels at creating complex layouts, magazine-style designs, and responsive grids that adapt to different screen sizes with minimal code.
Grid Fundamentals
Basic Grid Setup
```css
/* Creating a grid container */
.grid-container {
display: grid;
/* display: inline-grid; Creates inline grid container */
/* Define columns and rows */
grid-template-columns: 1fr 2fr 1fr; /* 3 columns */
grid-template-rows: 100px auto 50px; /* 3 rows */
/* Gap between grid items */
gap: 20px;
grid-gap: 20px; /* Legacy property */
row-gap: 10px; /* Vertical gap */
column-gap: 15px; /* Horizontal gap */
}
/* Grid items are direct children of grid container */
.grid-item {
background-color: lightblue;
padding: 20px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
```
### Grid Lines and Positioning
```css
/* Grid items can be positioned using line numbers */
.grid-positioned {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.item-positioned {
grid-column-start: 2; /* Start at column line 2 */
grid-column-end: 4; /* End at column line 4 */
grid-row-start: 1; /* Start at row line 1 */
grid-row-end: 3; /* End at row line 3 */
/* Shorthand syntax */
grid-column: 2 / 4; /* column-start / column-end */
grid-row: 1 / 3; /* row-start / row-end */
grid-area: 1 / 2 / 3 / 4; /* row-start / col-start / row-end / col-end */
background-color: coral;
}
```
## Grid Template Systems
### Using fr Units and repeat()
```css
/* Fractional units (fr) for flexible sizing */
.grid-fractional {
display: grid;
grid-template-columns:
200px /* Fixed width */
1fr /* Takes remaining space */
2fr /* Takes twice as much as 1fr */
100px; /* Fixed width */
/* repeat() function for repetitive patterns */
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
grid-template-columns: repeat(3, 200px); /* 3 fixed columns */
grid-template-columns: repeat(auto-fit, 200px); /* Responsive columns */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* Advanced repeat patterns */
.grid-advanced-repeat {
display: grid;
/* Repeat with mixed sizes */
grid-template-columns: repeat(3, 100px 200px); /* 100px 200px 100px 200px 100px 200px */
/* Named lines with repeat */
grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}
```
### Auto-fit vs Auto-fill
```css
/* auto-fit: columns collapse when empty */
.grid-auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
/* auto-fill: maintains column structure even when empty */
.grid-auto-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
/* Responsive grid without media queries */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 1rem;
}
```
### Grid Template Areas
```css
/* Named grid areas for semantic layouts */
.layout-grid {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 1rem;
}
/* Assign items to named areas */
.header {
grid-area: header;
background-color: #333;
color: white;
padding: 1rem;
}
.sidebar {
grid-area: sidebar;
background-color: #f8f9fa;
padding: 1rem;
}
.main {
grid-area: main;
padding: 2rem;
}
.aside {
grid-area: aside;
background-color: #e9ecef;
padding: 1rem;
}
.footer {
grid-area: footer;
background-color: #6c757d;
color: white;
padding: 1rem;
}
/* Responsive template areas */
@media (max-width: 768px) {
.layout-grid {
grid-template-areas:
"header"
"main"
"sidebar"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
```
## Advanced Grid Techniques
### Implicit vs Explicit Grid
```css
.grid-implicit {
display: grid;
/* Explicit grid definition */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px; /* Only 2 rows defined */
/* Implicit grid sizing (for extra items) */
grid-auto-rows: 150px; /* Size for additional rows */
grid-auto-columns: 1fr; /* Size for additional columns */
grid-auto-flow: row; /* row | column | row dense | column dense */
}
/* Grid with automatic placement */
.auto-placement {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
grid-auto-flow: row dense; /* Fill holes in grid */
gap: 1rem;
}
.large-item {
grid-column: span 2; /* Span 2 columns */
grid-row: span 2; /* Span 2 rows */
}
```
### Subgrid (Limited Support)
```css
/* Subgrid inherits parent grid tracks */
.parent-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.subgrid-item {
grid-column: 1 / 4;
display: grid;
grid-template-columns: subgrid; /* Inherits parent columns */
gap: inherit; /* Inherits parent gap */
}
```
## Practical Grid Patterns
### 1. Magazine Layout
```css
.magazine-layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, 100px);
gap: 1rem;
padding: 1rem;
}
.hero-article {
grid-column: 1 / 8;
grid-row: 1 / 5;
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('hero-image.jpg');
background-size: cover;
color: white;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.sidebar-article {
grid-column: 8 / 13;
grid-row: 1 / 3;
background-color: #f8f9fa;
padding: 1rem;
}
.featured-article {
grid-column: 8 / 13;
grid-row: 3 / 5;
background-color: white;
border: 1px solid #ddd;
padding: 1rem;
}
.news-items {
grid-column: 1 / 7;
grid-row: 5 / 9;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.trending {
grid-column: 7 / 13;
grid-row: 5 / 9;
background-color: #e9ecef;
padding: 1rem;
}
```
### 2. Dashboard Layout
```css
.dashboard {
display: grid;
grid-template-areas:
"header header header header"
"sidebar main main aside"
"sidebar charts charts aside"
"sidebar footer footer footer";
grid-template-columns: 250px 1fr 1fr 200px;
grid-template-rows: 60px 1fr 300px 60px;
height: 100vh;
gap: 1rem;
padding: 1rem;
background-color: #f5f5f5;
}
.dashboard-header {
grid-area: header;
background-color: white;
border-radius: 8px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.dashboard-sidebar {
grid-area: sidebar;
background-color: #2c3e50;
color: white;
border-radius: 8px;
padding: 1rem;
}
.dashboard-main {
grid-area: main;
background-color: white;
border-radius: 8px;
padding: 2rem;
overflow-y: auto;
}
.dashboard-aside {
grid-area: aside;
display: grid;
gap: 1rem;
}
.widget {
background-color: white;
border-radius: 8px;
padding: 1rem;
}
.dashboard-charts {
grid-area: charts;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.chart {
background-color: white;
border-radius: 8px;
padding: 1rem;
}
```
### 3. Photo Gallery
```css
.photo-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
gap: 1rem;
padding: 1rem;
}
.photo {
background-size: cover;
background-position: center;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
}
.photo:hover {
transform: scale(1.05);
}
/* Featured photos span multiple cells */
.photo-large {
grid-column: span 2;
grid-row: span 2;
}
.photo-wide {
grid-column: span 2;
}
.photo-tall {
grid-row: span 2;
}
```
### 4. Card Grid with Different Sizes
```css
.card-masonry {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: max-content;
gap: 2rem;
padding: 2rem;
}
.card {
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
}
.card-content {
padding: 1.5rem;
}
/* Different card sizes */
.card-featured {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
}
.card-small {
grid-row: span 1;
}
.card-large {
grid-row: span 2;
}
```
## Responsive Grid Strategies
### Container Queries (Modern Approach)
```css
.responsive-container {
container-type: inline-size;
display: grid;
gap: 1rem;
}
/* Default: single column */
.grid-responsive {
display: grid;
grid-template-columns: 1fr;
}
/* 2 columns when container is wider than 400px */
@container (min-width: 400px) {
.grid-responsive {
grid-template-columns: repeat(2, 1fr);
}
}
/* 3 columns when container is wider than 600px */
@container (min-width: 600px) {
.grid-responsive {
grid-template-columns: repeat(3, 1fr);
}
}
```
### Media Query Approach
```css
.responsive-layout {
display: grid;
gap: 1rem;
padding: 1rem;
}
/* Mobile first */
.responsive-layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
/* Tablet */
@media (min-width: 768px) {
.responsive-layout {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
}
}
/* Desktop */
@media (min-width: 1024px) {
.responsive-layout {
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
}
}
```
## Grid Alignment and Justification
```css
.grid-alignment {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(3, 100px);
gap: 20px;
height: 500px;
width: 800px;
border: 2px solid #ccc;
/* Align grid within container */
justify-content: center; /* start | end | center | stretch |
space-around | space-between | space-evenly */
align-content: center; /* start | end | center | stretch |
space-around | space-between | space-evenly */
/* Align items within their grid areas */
justify-items: stretch; /* start | end | center | stretch */
align-items: stretch; /* start | end | center | stretch */
}
/* Individual item alignment */
.grid-item-aligned {
justify-self: center; /* Override justify-items */
align-self: end; /* Override align-items */
}
```
## Common Grid Patterns and Recipes
### Equal Height Cards
```css
.equal-height-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.card {
display: grid;
grid-template-rows: auto 1fr auto; /* Header, content, footer */
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-header {
padding: 1rem;
border-bottom: 1px solid #eee;
}
.card-body {
padding: 1rem;
/* Takes remaining space */
}
.card-footer {
padding: 1rem;
border-top: 1px solid #eee;
margin-top: auto;
}
```
### Centered Layout with Max Width
```css
.centered-grid {
display: grid;
grid-template-columns: 1fr min(1200px, 100%) 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.centered-content {
grid-column: 2;
padding: 0 2rem;
}
.full-width {
grid-column: 1 / -1; /* Spans full width */
background-color: #f8f9fa;
}
```
Conclusion
CSS Grid is incredibly powerful for creating complex, responsive layouts. Master the fundamentals of grid containers and items, understand how template areas work, and practice with different sizing functions like minmax() and repeat(). Grid excels at two-dimensional layouts where you need precise control over both rows and columns.
Use Grid for page layouts, dashboards, and complex components, while combining it with Flexbox for component-level layouts. The combination of both layout systems gives you complete control over any design challenge.