Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Responsive Web Design) expand_more
Responsive Foundations
Viewport meta tag Mobile-first CSS Fluid widths Max-width containers Relative units Box sizing Intrinsic sizing Content-driven breakpoints
Media Queries
Min-width queries Max-width queries Range syntax Orientation query Hover capability Pointer capability Reduced motion Color scheme
Flexible Layout
Flex wrapping Responsive flex direction CSS Grid auto-fit CSS Grid minmax Auto placement Gap scaling Subgrid concept Ordering caveats
Responsive Media
Responsive images srcset width descriptors sizes attribute Picture art direction Object fit Aspect ratio Video responsiveness Lazy loading
Container Queries
Container type Container name Container width query Container style query concept Container query units Nested components Fallback strategy Component breakpoint design
Production Accessibility
Fluid typography Clamp Logical properties Touch target sizing Responsive navigation Table overflow Print styles Testing viewport matrix
Responsive Web Design / Flexible Layout

CSS Grid auto-fit

Learn CSS Grid auto-fit in Responsive Web Design with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Intermediate
responsive-web-design-019.css
css 
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem}
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

CSS Grid auto-fit Mastery Check →
← PREVIOUS
Responsive flex direction
NEXT →
CSS Grid minmax