Flexbox & GridBeginner
1Question 1 of 1
cssHow do CSS Flexbox and CSS Grid differ and when should each be used?
Explanation & Concept
• **Flexbox (1D Layout)**: Designed for laying out items in a single dimension (either a row OR a column). Ideal for navigation bars, button groups, and centering elements. • **CSS Grid (2D Layout)**: Designed for two-dimensional layouts (rows AND columns simultaneously). Ideal for page templates, dashboard layouts, and complex responsive card grids.
Code Example
css
/* 1. Flexbox: Centering and spreading items in a row */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
/* 2. Grid: 2D responsive grid with auto-fitting columns */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}How It Works & Key Takeaways
`repeat(auto-fit, minmax(280px, 1fr))` creates a fully responsive card grid without writing a single media query breakpoint.
Mock Test · 1 Questions · Optional
Ready for Animations & Transitions?
Take a quick test to evaluate yourself, or move straight to the next module.
Beginner3 questions