Skip to main content
grasp.study
About
Explore
Pricing
Log in
Try it for free
Back to course
👋
Welcome to a Grasp lesson
Create a free account
to keep studying and create your own study path.
Master frontend development: HTML, CSS, JS, React
·
Module 3
Advanced CSS Layout: Flexbox & Grid
1
Understanding Flex Item Sizing: flex-grow, flex-shrink, and flex-basis
Describe how flex-grow, flex-shrink, and flex-basis determine flexible item sizing.
2
Flexbox: Understanding Space Distribution
Explain the conceptual algorithm flexbox uses to distribute space among items.
3
Flexbox Alignment: Main and Cross Axis Control
Explain how flexbox alignment properties (justify-content, align-items, align-self) control positioning along the main and cross axes.
4
Implicit vs. Explicit Grid Tracks
Explain the difference between implicit and explicit grid tracks and when each is created.
5
Understanding the 'fr' Unit in CSS Grid Layout
Describe how the 'fr' unit functions and how the grid algorithm distributes fractional space.
6
Understanding Grid Template Areas
Explain how 'grid-template-areas' defines named layout regions.
7
Auto-fill vs. Auto-fit: Responsive Grid Layouts
Differentiate the behavior of 'auto-fill' and 'auto-fit' for creating responsive grid layouts.
8
Grid and Flexbox: Mastering Page and Component Layouts
Describe a strategy for combining Grid and Flexbox, explaining when to nest one within the other for page-level versus component-level layouts.
Previous module
CSS Fundamentals: The Cascade & Box Model
Next module
Advanced CSS Topics: Transitions, Responsiveness, and Variables