Basics of Grid
CSS Grid is a modern two-dimensional layout system used to create rows and columns together.
It is one of the most powerful CSS features for building complex and responsive layouts.
Why Grid is Important?
- Create advanced layouts easily
- Manage rows and columns together
- Build responsive UI
- Reduce extra CSS code
- Create modern dashboard layouts
- Better control over spacing and positioning
How Grid Works?
Grid works using:
- Grid Container → Parent element
- Grid Items → Child elements
Basic Grid Example
[code theme="dark"]
[/code]
[code theme="dark"]
.container{
display:grid;
grid-template-columns:200px 200px 200px;
gap:20px;
}
[/code]
display:grid activates Grid layout.
grid-template-columns
Defines the number and size of columns.
[code theme="dark"]
grid-template-columns:200px 200px 200px;
[/code]
This creates 3 columns.
Using Fraction Unit (fr)
fr means fraction of available space.
[code theme="dark"]
grid-template-columns:1fr 1fr 1fr;
[/code]
All columns get equal width.
Different Column Sizes
[code theme="dark"]
grid-template-columns:1fr 2fr 1fr;
[/code]
The middle column gets more space.
repeat() Function
Cleaner way to create repeated columns.
[code theme="dark"]
grid-template-columns:repeat(3,1fr);
[/code]
Equivalent to:
[code theme="dark"]
grid-template-columns:1fr 1fr 1fr;
[/code]
gap Property
Adds spacing between rows and columns.
[code theme="dark"]
.container{
gap:20px;
}
[/code]
row-gap and column-gap
[code theme="dark"]
row-gap:20px;
column-gap:40px;
[/code]
grid-template-rows
Defines row heights.
[code theme="dark"]
grid-template-rows:100px 200px;
[/code]
Responsive Grid Example
[code theme="dark"]
.container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}
[/code]
How It Works?
- 250px → Minimum width
- 1fr → Grow equally
- auto-fit → Automatically adjust columns
This is one of the most commonly used responsive Grid patterns.
Grid Item Positioning
Grid items can span across rows and columns.
Column Span
[code theme="dark"]
.box{
grid-column:span 2;
}
[/code]
Item takes 2 columns width.
Row Span
[code theme="dark"]
.box{
grid-row:span 2;
}
[/code]
Full Layout Example
[code theme="dark"]
.container{
display:grid;
grid-template-columns:200px 1fr;
gap:20px;
}
[/code]
Use Case:
- Sidebar → 200px
- Main content → Remaining space
Grid Template Areas
Named layout areas for cleaner structure.
[code theme="dark"]
.container{
display:grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
[/code]
Assign Area Names
[code theme="dark"]
.header{
grid-area:header;
}
.sidebar{
grid-area:sidebar;
}
[/code]
Grid Alignment
justify-items
Horizontal alignment inside cells.
[code theme="dark"]
justify-items:center;
[/code]
align-items
Vertical alignment inside cells.
[code theme="dark"]
align-items:center;
[/code]
place-items
Shortcut for both alignments.
[code theme="dark"]
place-items:center;
[/code]
Common Grid Use Cases
- Dashboard layouts
- Gallery layouts
- Card grids
- Admin panels
- Pricing sections
- Complex responsive layouts
Grid vs Flexbox
|
Grid
|
Flexbox
|
|
Two-dimensional
|
One-dimensional
|
|
Rows and columns together
|
Row OR column
|
|
Better for page layouts
|
Better for alignment
|
|
More powerful for complex UI
|
Simpler layouts
|
Tailwind Grid Classes
Enable Grid
[code theme="dark"]
grid
[/code]
Columns
[code theme="dark"]
grid-cols-2
grid-cols-3
grid-cols-4
[/code]
Gap
[code theme="dark"]
gap-4
gap-6
[/code]
Responsive Grid
[code theme="dark"]
[/code]
Meaning
- Mobile → 1 column
- Desktop → 3 columns
Tailwind Auto Responsive Grid
[code theme="dark"]
[/code]
Best Practices
- Use Grid for page layouts
- Use Flexbox for alignment
- Use gap instead of margins
- Use responsive column patterns
- Avoid fixed widths where possible
Quick Summary
- display:grid → Activates Grid
- grid-template-columns → Creates columns
- grid-template-rows → Creates rows
- gap → Space between items
- fr → Fraction unit
- repeat() → Repeated columns
- auto-fit + minmax() → Responsive layouts
CSS Grid is one of the best tools for creating modern responsive layouts and dashboards.