Search pages
Search all CSS Showcase pages by name
CSS Grid
The ultimate two-dimensional layout system — precise control meets flexibility
Grid Fundamentals
CSS Grid allows you to create complex layouts by defining rows and columns, then placing items exactly where you want them.
repeat(3, 1fr)
auto-fit, minmax(120px, 1fr)
150px 1fr 100px
gap: 2rem
Grid Placement
Place items precisely using line numbers, spanning, and the grid-column/grid-row properties.
Grid Template Areas
Define your layout visually using named grid areas — it's like ASCII art for layouts!
Real-World Grid Layouts
Practical grid layouts you can use in your projects today.
Interactive Grid Playground
Experiment with grid properties and see the results in real-time. Adjust columns, gaps, flow, and item spanning.
Grid Container
Item Properties
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}Flexbox vs Grid
Both are essential layout tools, but they excel in different scenarios. See the same content rendered by each system.
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 200px;
/* Items grow/shrink from 200px basis */
/* Cannot control exact column count */
}.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
/* Exact control: always fills the row */
/* Consistent column widths */
}Verdict: Both work, but Grid's auto-fit + minmax() gives consistent column widths. Flexbox items may grow unevenly on the last row.
Grid Best Practices
Use FR Units
The fr unit creates flexible tracks that share available space proportionally. Prefer fr over percentages for fluid layouts.
Mobile-First Grid
Start with a single column on mobile, then add complexity for larger screens using media queries or auto-fit.
Combine with Flexbox
Use Grid for page-level layout, Flexbox for component alignment. They work brilliantly together!
Explore More Layout Magic
You've mastered Grid! Time to explore more layout techniques and visual effects.