CSS layout: Flexbox and Grid in depth
You try the alignment, sizing and placement rules of Flexbox and Grid one by one and build real page layouts robustly.
Level 201 · 19 lessons · 18 practice labs
Lessons
Flexbox
- The main axis and the cross axis
- flex-grow, flex-shrink and flex-basis
- Alignment: justify-content and align-items
- Wrapping and gap
- Flexbox patterns: the media object and a sticky footer
- Short task: a toolbar that wraps as it narrows
Grid
- Tracks, the fr unit and repeat
- Placing by line numbers
- Named areas: grid-template-areas
- Self-responsive grids with auto-fit, auto-fill and minmax
- The implicit grid and dense packing
- Alignment in Grid
- Nested alignment with subgrid
- Short task: an equal-height card grid
Layout decisions
- Flexbox or Grid: a decision guide
- Header, sidebar, content and footer layout
- Overflow problems and min-width: 0
- Debugging layouts with developer tools
- Capstone: an admin dashboard layout
Practice labs
- Set flexible column ratios: Give flex-grow and flex-basis values so the sidebar stays fixed and the content area flexes.
- Rescue a squashed item: The logo gets squashed when the toolbar narrows; decide which items shrink with flex-shrink and min-width.
- Build a toolbar that wraps as it narrows: Write a toolbar of button groups with flex-wrap and gap that stays aligned at every width.
- Centre an item exactly: Place the login box in the exact centre of the screen with justify-content and align-items.
- Keep the footer down on short pages: Pin a footer that rides up on short pages to the bottom with Flexbox.
- Build the media object pattern: Build a comment row of avatar, name, text and action buttons that aligns neatly at any length.
- Build an equal-column grid: Write a four equal-column gallery grid with repeat and fr.
- Make a self-responsive card grid: Build a grid that sets its column count by width with auto-fit and minmax, without media queries.
- Show auto-fill versus auto-fit: Show the difference between the two values on a sparse grid and pick the right one for Sardunya Art's gallery.
- Place an item by line number: Place the featured story to span two columns and two rows with grid-column and grid-row.
- Lay out a page with named areas: Build header, sidebar, content and footer with grid-template-areas and reorder the areas on mobile.
- Fill gaps with dense packing: Fill the gaps in a mosaic of mixed-size photos with dense packing and assess the effect on reading order.
- Adjust alignment inside cells: Align the buttons in price cards to the bottom of their cells with justify-self and align-self.
- Make an equal-height card grid: Keep title, text and button aligned across cards with different title lengths using subgrid.
- Align form labels with subgrid: Tie labels and fields in nested fieldsets to the outer grid's columns with subgrid.
- Choose Flexbox or Grid: Decide which layout method suits five interface pieces and implement one of them.
- Stop overflow with min-width: 0: A column with a long URL and a code block overflows the grid; find the cause with developer tools and fix it.
- Build an admin dashboard layout: Build a dashboard with a collapsible sidebar, fixed header and scrollable content using Grid and Flexbox.
About this course
You try the alignment, sizing and placement rules of Flexbox and Grid one by one and build real page layouts robustly.
What you will learn
- Flexbox
- Grid
- Layout decisions
Prerequisites
Finishing the level 101 courses of the same path, or knowing those topics, is enough.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 201; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.