Card One
This grid uses auto-fit + minmax() so cards automatically reflow.
Layout Systems & Responsive Design
Modern CSS layout is primarily handled by Flexbox and Grid, combined with responsive techniques.
1. Flexbox
Flexbox is best for one-dimensional layouts (a row or a column). It excels at alignment and distributing space.
Basic Flex Container
Item 1
Item 2
Item 3
Item 4
Centering with Flexbox
Perfectly centered content
Key properties: display: flex, justify-content,
align-items, flex, gap, flex-wrap.
2. CSS Grid
Grid is best for two-dimensional layouts (rows and columns together). It is the most powerful layout system in CSS.
Responsive Grid (auto-fit)
1
2
3
4
5
6
Named Grid Areas (page layout pattern)
Header
Main Content
Key properties: display: grid, grid-template-columns,
grid-template-areas, gap, minmax(), auto-fit.
3. Responsive Design Principles
Core ideas that make layouts work across screen sizes:
- Fluid widths – prefer
%,fr,minmax(),auto-fitover fixed pixels - Flexible media –
max-width: 100%on images and videos - Responsive typography – use relative units (
rem,em,clamp()) - Media queries – apply different styles at specific breakpoints
- Mobile-first – write base styles for small screens, then enhance for larger ones
Live Media Query Example
Resize the browser window
Responsive Card Grid
Card Two
No media queries needed for the basic responsive behavior.
Card Three
Works from mobile to wide desktop with a single declaration.