What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system designed specifically for web page layout. It allows you to organize content into rows and columns, and has many features that make building complex layouts straightforward.
With CSS Grid, you can:
- Create two-dimensional layouts (rows and columns at the same time)
- Place items precisely on the grid
- Overlap elements if needed
- Control alignment and spacing in both directions
- Create responsive layouts without using media queries (through auto features)
Grid Container Basics
To start using CSS Grid, you need to define a container as a grid container:
.container {
display: grid;
}
Here's a simple example of a grid with three equal columns:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
Grid Template Columns
The grid-template-columns property defines the number and width of columns in a grid:
grid-template-columns: [values];
/* Examples: */
grid-template-columns: 100px 200px 100px; /* Fixed widths */
grid-template-columns: 1fr 2fr 1fr; /* Fractional units */
grid-template-columns: repeat(3, 1fr); /* Repeat syntax */
Two Equal Columns
Column 1
Column 2
Column 1
Column 2
Four Equal Columns
Column 1
Column 2
Column 3
Column 4
Mixed Column Widths (1:2:1 ratio)
Grid Template Rows
The grid-template-rows property defines the height of each row:
grid-template-rows: [values];
/* Examples: */
grid-template-rows: 100px 200px 100px; /* Fixed heights */
grid-template-rows: auto; /* Auto height */
grid-template-rows: repeat(3, 100px); /* Repeat syntax */
Explicit Row Heights
Row 1, Col 1
Row 1, Col 2
Row 1, Col 3
Row 2, Col 1
Row 2, Col 2
Row 2, Col 3
Row 3, Col 1
Row 3, Col 2
Row 3, Col 3
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
Grid Gap
The grid-gap property (or gap in modern browsers) defines the space between grid items:
gap: [row-gap] [column-gap];
/* Examples: */
gap: 10px; /* Same gap for rows and columns */
gap: 20px 10px; /* 20px row gap, 10px column gap */
Grid Template Areas
The grid-template-areas property lets you name grid areas and create layouts visually:
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
}
.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-content { grid-area: content; }
.area-footer { grid-area: footer; }
Grid Line Placement
You can place items precisely by referring to grid lines with grid-column and grid-row:
grid-column: [start-line] / [end-line];
grid-row: [start-line] / [end-line];
Item 1
Item 2
Item 3
Item 4
Item 5
.line-item-1 {
grid-column: 1 / 3; /* From line 1 to line 3 (spanning 2 columns) */
grid-row: 1 / 2;
}
.line-item-2 {
grid-column: 3 / 4;
grid-row: 1 / 3; /* Spans 2 rows */
}
/* And so on for other items */
Spanning Items
Grid items can span multiple rows or columns using the span keyword:
grid-column: span [number];
grid-row: span [number];
Spans 2 Columns
Regular Item
Spans 2 Rows
Regular Item
Regular Item
Spans 2x2
Regular Item
.span-item-1 { grid-column: span 2; }
.span-item-2 { grid-row: span 2; }
.span-item-3 {
grid-column: span 2;
grid-row: span 2;
}
Auto Columns and Rows
CSS Grid can create implicit tracks for items that don't fit the explicitly defined grid:
grid-auto-columns: [value];
grid-auto-rows: [value];
Responsive Grid with auto-fit and minmax
One of the most powerful features of CSS Grid is creating responsive layouts without media queries:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Card 1
Card 2
Card 3
Card 4
Resize your browser window to see how the grid automatically adjusts the number of columns.
Grid vs. Flexbox: When to Use Each
CSS Grid and Flexbox are complementary layout systems:
- Use Grid when:
- You need a two-dimensional layout (rows AND columns)
- You're creating an overall page layout
- You need precise placement of items
- You want to overlap elements
- Use Flexbox when:
- You need a one-dimensional layout (either rows OR columns)
- You're working with content that needs to be flexible within a container
- You're aligning items within a container
- You're working with dynamic or unknown sizes
Best Practices
- Start Simple: Begin with the basic grid structure before adding complexity.
- Name Your Lines: For complex layouts, name your grid lines for better readability.
- Use auto-fit/auto-fill with minmax: This combination creates responsive layouts without media queries.
- Test Different Devices: Always test your grid layouts on different screen sizes.
- Combine with Flexbox: Use Grid for the overall layout and Flexbox for alignment within grid cells.