CSS Grid
## Learning Objectives
- Understand grid layout model
- Create grid containers and items
- Master grid template properties
- Create responsive grid layouts
## Grid Overview
CSS Grid is a two-dimensional layout system for rows and columns.
```html
```
```css
.grid-container {
display: grid;
}
```
## Grid Container Properties
### display
```css
.grid-container {
display: grid;
display: inline-grid; /* Inline grid container */
}
```
### grid-template-columns and rows
```css
/* Fixed columns */
.grid {
grid-template-columns: 100px 100px 100px;
}
/* Flexible columns */
.grid {
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
}
/* Mixed */
.grid {
grid-template-columns: 200px 1fr 1fr;
}
/* Repeat function */
.grid {
grid-template-columns: repeat(3, 1fr);
}
/* Auto-fit */
.grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
```
### grid-template-rows
```css
.grid {
grid-template-rows: 100px 200px auto;
}
```
### grid-template-areas
```css
.grid {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
/* Reference areas in items */
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
```
### gap
```css
.grid {
gap: 20px; /* Row and column gap */
gap: 10px 20px; /* Row gap, column gap */
row-gap: 10px;
column-gap: 20px;
}
```
### justify-items
Aligns items horizontally within their cells:
```css
.grid {
justify-items: stretch; /* Fill cell (default) */
justify-items: start;
justify-items: center;
justify-items: end;
}
```
### align-items
Aligns items vertically within their cells:
```css
.grid {
align-items: stretch; /* Fill cell (default) */
align-items: start;
align-items: center;
align-items: end;
}
```
### justify-content
Aligns the entire grid horizontally:
```css
.grid {
justify-content: start; /* Grid at left */
justify-content: center; /* Grid centered */
justify-content: end; /* Grid at right */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}
```
### align-content
Aligns the entire grid vertically:
```css
.grid {
align-content: start;
align-content: center;
align-content: end;
align-content: space-between;
}
```
## Grid Item Properties
### grid-column and grid-row
```css
.item {
/* Span multiple columns */
grid-column: 1 / 3; /* Start at line 1, end at line 3 */
grid-column: 1 / span 2; /* Start at line 1, span 2 columns */
grid-column: 1; /* Start at line 1 (grid-column: 1 / 2) */
grid-column: -1; /* Last column */
/* Span multiple rows */
grid-row: 1 / 3;
grid-row: 1 / span 2;
}
```
### grid-area
```css
.item {
grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
}
```
### justify-self
```css
.item {
justify-self: start;
justify-self: center;
justify-self: end;
justify-self: stretch;
}
```
### align-self
```css
.item {
align-self: start;
align-self: center;
align-self: end;
align-self: stretch;
}
```
### order
```css
.item {
order: 0; /* Default */
order: -1; /* Moves to front */
}
```
## Named Lines
```css
.grid {
grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end];
}
.full-width {
grid-column: full-start / full-end;
}
.content {
grid-column: content-start / content-end;
}
```
## Auto-placement
```css
.grid {
grid-auto-flow: row; /* Fill rows first (default) */
grid-auto-flow: column; /* Fill columns first */
grid-auto-flow: dense; /* Fill holes in layout */
}
```
### Auto-fill and Auto-fit
```css
/* Auto-fill: creates as many columns as fit */
.grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* Auto-fit: expands columns to fill space */
.grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
```
## Common Layouts
### Holy Grail Layout
```css
.grid-container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 200px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
```
### Card Grid
```css
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
```
### Magazine Layout
```css
.magazine {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.featured {
grid-column: 1 / 7;
grid-row: 1 / 3;
}
.secondary1 {
grid-column: 7 / 10;
}
.secondary2 {
grid-column: 10 / 13;
}
```
## Responsive Grid
```css
.responsive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 600px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.responsive-grid {
grid-template-columns: repeat(4, 1fr);
}
}
```
## Browser Support
CSS Grid is supported in all modern browsers.
```css
.grid {
display: -ms-grid; /* IE 10, 11 */
display: grid;
}
```
## Summary
- Grid: two-dimensional layout with `display: grid`
- `grid-template-columns` and `grid-template-rows` define track sizes
- `fr` units are flexible fractions of available space
- `grid-column` and `grid-row` position items
- `grid-template-areas` creates named template regions
- `repeat(auto-fit, minmax())` creates responsive auto-placement
- `justify-items`/`align-items` align items in cells
- `justify-content`/`align-content` align the entire grid
1
2
3
4
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →