CSS Grid and Flexbox have revolutionized web layout design. This comprehensive guide covers everything you need to master these powerful layout systems and create responsive, modern designs.
1. CSS Flexbox Fundamentals
Flexbox is perfect for one-dimensional layouts and component-level design.
Basic Flex Container
.flex-container {
display: flex;
justify-content: space-between; /* Main axis alignment */
align-items: center; /* Cross axis alignment */
gap: 1rem; /* Space between items */
}
.flex-item {
flex: 1; /* Grow to fill space */
min-width: 0; /* Prevent overflow */
}Flexbox Properties Explained
/* Container Properties */
.container {
display: flex;
flex-direction: row | column;
flex-wrap: nowrap | wrap;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | flex-start | flex-end;
align-content: stretch | center | flex-start;
}
/* Item Properties */
.item {
flex-grow: 0; /* How much item should grow */
flex-shrink: 1; /* How much item should shrink */
flex-basis: auto; /* Initial size before growing/shrinking */
align-self: auto; /* Override container's align-items */
}2. CSS Grid Layout System
Grid is ideal for two-dimensional layouts and page-level design.
Basic Grid Setup
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Three columns */
grid-template-rows: auto 1fr auto; /* Three rows */
gap: 1rem; /* Gap between cells */
min-height: 100vh; /* Full viewport height */
}
.header { grid-area: 1 / 1 / 2 / 4; } /* Row 1, spans 3 columns */
.sidebar { grid-area: 2 / 1 / 3 / 2; } /* Column 1, row 2 */
.main { grid-area: 2 / 2 / 3 / 3; } /* Column 2, row 2 */
.aside { grid-area: 2 / 3 / 3 / 4; } /* Column 3, row 2 */
.footer { grid-area: 3 / 1 / 4 / 4; } /* Row 3, spans 3 columns */Named Grid Lines and Areas
.grid-layout {
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;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }3. Responsive Design with Grid and Flexbox
Responsive Grid Layout
/* Mobile-first responsive grid */
.responsive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* Tablet */
@media (min-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop */
@media (min-width: 1024px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Auto-fit responsive columns */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}Flexible Navigation with Flexbox
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
flex-wrap: wrap;
}
.nav-brand {
flex-shrink: 0;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
margin: 0;
padding: 0;
}
.nav-actions {
display: flex;
gap: 1rem;
align-items: center;
}
/* Responsive navigation */
@media (max-width: 768px) {
.navigation {
flex-direction: column;
gap: 1rem;
}
.nav-links {
order: 3;
width: 100%;
justify-content: center;
}
}4. Advanced Grid Techniques
Subgrid (Firefox Support)
.parent-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
.child-grid {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid; /* Inherits parent's columns */
gap: inherit;
}Grid with Dynamic Content
/* Masonry-style layout */
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 20px;
gap: 1rem;
}
.masonry-item {
grid-row-end: span var(--rows, 10); /* Dynamic height */
}5. Component Patterns
Card Layout with Flexbox
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 1rem;
flex: 1;
display: flex;
flex-direction: column;
}
.card-title {
margin: 0 0 0.5rem;
}
.card-description {
flex: 1;
margin-bottom: 1rem;
}
.card-actions {
margin-top: auto;
}Dashboard Layout with Grid
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"sidebar stats stats"
"sidebar charts analytics"
"sidebar recent recent";
grid-template-columns: 240px 1fr 1fr;
grid-template-rows: auto auto 1fr auto;
height: 100vh;
gap: 1rem;
}
.widget {
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
@media (max-width: 1024px) {
.dashboard {
grid-template-areas:
"header"
"stats"
"charts"
"analytics"
"recent"
"sidebar";
grid-template-columns: 1fr;
}
}6. Common Layout Challenges Solved
Perfect Centering
/* Flexbox centering */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Grid centering */
.grid-center {
display: grid;
place-items: center;
min-height: 100vh;
}Sticky Footer
.page-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex: 1;
}
.footer {
margin-top: auto;
}7. Performance and Best Practices
- Use Grid for 2D layouts: Page layouts, dashboards
- Use Flexbox for 1D layouts: Navigation, cards, forms
- Avoid unnecessary nesting: Keep layouts simple
- Use gap instead of margins: Better spacing control
- Consider browser support: Progressive enhancement
- Test on real devices: Ensure responsive behavior
8. Browser Support and Fallbacks
/* Feature detection and fallbacks */
.layout {
/* Fallback for older browsers */
display: block;
}
/* Modern browsers with Grid support */
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
}
/* Flexbox fallback for Grid */
@supports (display: flex) and (not (display: grid)) {
.layout {
display: flex;
flex-wrap: wrap;
}
}Mastering CSS Grid and Flexbox enables you to create sophisticated, responsive layouts with clean, maintainable code. Practice these techniques and experiment with different combinations to build modern, flexible web interfaces.