Episode 1 — Fundamentals / 1.8 — CSS Layout Mastery
1.8 — Exercise Questions: CSS Layout Mastery
Practice questions for all seven subtopics in Section 1.8. Mix of conceptual, CSS code writing, layout challenges, and DevTools exercises. Try each without reopening the lesson files first.
How to use this material (instructions)
- Read lessons in order —
README.md, then1.8.a→1.8.gin sequence. - Answer closed-book first — write CSS or short explanations, then compare to the matching lesson.
- Hands-on DevTools — use Elements, Computed, and Layers panels where indicated.
- Redo misses — retry the next day; mark weak subtopics.
- Interview prep — pair with
1.8-Interview-Questions.md.
1.8.a — Flexbox Deep Dive (Q1–Q12)
Q1. What does display: flex do to an element and its direct children?
Q2. Draw (or describe) the main axis and cross axis when flex-direction: row and when flex-direction: column.
Q3. What is the difference between flex-wrap: nowrap and flex-wrap: wrap? What happens to items that overflow with nowrap?
Q4. List all six justify-content values and describe the spacing each produces.
Q5. What is the difference between align-items and align-content? When does align-content have an effect?
Q6. Expand flex: 1 into its three longhand values. What does each part mean?
Q7. Write CSS for a flex container where:
- Items wrap to new lines
- There is 16px gap between items
- Items are centered on the cross axis
Q8. What is the difference between flex: auto and flex: none?
Q9. How does order affect flex items? What is the accessibility concern?
Q10. Write CSS to create a sidebar + main content layout using flexbox where the sidebar is fixed at 250px and main content fills the rest.
Q11. Why is gap preferred over margin for spacing flex items?
Q12. When should you not use flexbox and reach for Grid instead? Give two examples.
1.8.b — Common Layout Patterns (Q13–Q22)
Q13. Write CSS for a navbar with: logo (left), nav links (center area), sign-in button (right). Use flexbox.
Q14. Explain how margin-left: auto works on a flex item. Why does it push items to the right?
Q15. Write one line of CSS (grid-template-columns) that creates a responsive card grid where each card is at least 280px wide and columns fill available space.
Q16. List four different ways to center an element both horizontally and vertically. Which would you reach for first?
Q17. What is the "holy grail" layout? Sketch it and write the CSS using Grid grid-template-areas.
Q18. Write CSS for a sticky footer that stays at the bottom even when page content is short. Use the grid approach.
Q19. Write CSS for a sticky footer using the flexbox approach. What is the key property on <main>?
Q20. What does width: min(90%, 1200px) do? Why is it useful?
Q21. Write a responsive card row using flex-wrap that needs no media queries. Cards should have a minimum width of 300px.
Q22. Hands-on: Open DevTools on any website. Inspect the navbar and identify: Is it using flexbox or grid? How are items spaced (gap, margin, justify-content)?
1.8.c — CSS Grid (Q23–Q36)
Q23. What is the fr unit? Why is it better than percentages when gap is used?
Q24. Write grid-template-columns for a 3-column layout where the left and right columns are 200px and the center fills the rest.
Q25. Explain repeat(auto-fill, minmax(200px, 1fr)) — what does each part do?
Q26. What is the difference between auto-fill and auto-fit? When do they produce different results?
Q27. Write CSS to place a grid item starting at column line 2 and spanning 3 columns.
Q28. Create a layout using grid-template-areas with: header (full width), sidebar (left), main (right), footer (full width).
Q29. What is the implicit grid? How do you control the size of implicitly created rows?
Q30. What does grid-auto-flow: dense do? What is the accessibility concern?
Q31. Write CSS for a grid where the first item spans 2 columns and 2 rows, and the rest are auto-placed.
Q32. How do grid line numbers work? If you have grid-template-columns: 1fr 1fr 1fr, how many column lines exist?
Q33. What is subgrid and what problem does it solve?
Q34. Write CSS for a photo gallery grid where images are at least 150px wide and fill available space.
Q35. What is the difference between grid-template-rows and grid-auto-rows?
Q36. Hands-on: Create a 3×3 grid in a CodePen. Place one item across the full top row using grid-column: 1 / -1. Observe what -1 means.
1.8.d — Combining Grid and Flex (Q37–Q44)
Q37. What is the general rule for when to use Grid vs Flexbox?
Q38. In a typical web app, which layout engine would you use for: (a) the page shell, (b) the navbar, (c) a card's internal layout, (d) a card grid?
Q39. Write CSS for a card component (flex, vertical) where the action button is always pushed to the bottom, regardless of content length.
Q40. Write a complete page layout CSS skeleton with: header (flex row), sidebar + main (grid), cards in main (grid), each card (flex column).
Q41. When would you nest a grid inside a flex container? Give one practical example.
Q42. When would you nest a flex inside a grid cell? Give one practical example.
Q43. A footer has four columns of links. Write CSS using flexbox with wrapping. Then rewrite it using grid. Which do you prefer and why?
Q44. Hands-on: Pick any website with a sidebar layout. In DevTools, identify each layer of layout (page grid, component flex). How many nesting levels do you see?
1.8.e — Positioning (Q45–Q54)
Q45. List all five position values and state whether each removes the element from normal flow.
Q46. What is a containing block for an absolutely positioned element? How does the browser find it?
Q47. Write CSS to place a notification badge in the top-right corner of a card.
Q48. What is the difference between position: fixed and position: sticky?
Q49. Why might a position: fixed element stop being fixed relative to the viewport? Name one CSS property on an ancestor that causes this.
Q50. Write CSS for a sticky table header that stays visible while scrolling the table.
Q51. What does inset: 0 do on an absolutely positioned element?
Q52. Name two common gotchas with position: sticky.
Q53. Write CSS for a full-screen modal overlay using position: fixed.
Q54. Hands-on: Create a simple page with a sticky header. Wrap the header's parent in a div with overflow: hidden. What happens to the sticky behavior? Why?
1.8.f — Stacking Context (Q55–Q63)
Q55. What is a stacking context? Why is z-index not a "global layer number"?
Q56. List five CSS properties (besides position + z-index) that create a new stacking context.
Q57. A modal with z-index: 9999 appears behind a sidebar with z-index: 1. Explain how this is possible.
Q58. What is the default paint order for elements within a stacking context? (List 3–4 layers from back to front.)
Q59. What does isolation: isolate do? When would you use it?
Q60. Design a token-based z-index system for an app with: dropdowns, sticky header, modals, tooltips, and toast notifications.
Q61. You add transform: translateZ(0) to an element for GPU acceleration. What side effect does this have on stacking and on any position: fixed descendants?
Q62. How would you debug a z-index issue in Chrome DevTools? Name the specific panel.
Q63. Hands-on: Create two sibling divs. Give the first one position: relative; z-index: 1; opacity: 0.99. Place an absolutely positioned child inside it with z-index: 9999. Create a second sibling with position: relative; z-index: 2. Which sibling's child appears on top? Why?
1.8.g — Container Queries (Q64–Q72)
Q64. What problem do container queries solve that media queries cannot?
Q65. Write CSS to define an element as a container for inline-size queries.
Q66. Write a @container rule that changes a card from column to row layout when the container is wider than 500px.
Q67. What is the difference between container-type: inline-size and container-type: size?
Q68. What are cqi and cqw units? How do they differ from vw?
Q69. How would you provide a fallback for browsers that do not support container queries?
Q70. Write CSS for a stats widget that shows 3 columns in a wide container and stacks to 1 column below 300px width. Use container queries.
Q71. When should you use media queries vs container queries? Give one use case for each.
Q72. Hands-on: Create a container query demo: one card component placed inside a 300px sidebar and inside a 700px main area. Verify that the card adapts to each container independently.
Answer hints
(Short reminders — expand in your own words when studying.)
| Q | Hint |
|---|---|
| Q1 | Creates flex formatting context; children become flex items |
| Q2 | Row: main=horizontal, cross=vertical. Column: main=vertical, cross=horizontal |
| Q6 | flex: 1 → flex-grow: 1, flex-shrink: 1, flex-basis: 0% |
| Q8 | auto = 1 1 auto (grow from content); none = 0 0 auto (inflexible) |
| Q11 | gap only adds space between items, not at edges; no negative-margin hacks |
| Q14 | Auto margin absorbs all available space in that direction within a flex container |
| Q15 | repeat(auto-fill, minmax(280px, 1fr)) |
| Q16 | Flex center, grid place-items, margin auto (horizontal), absolute+transform |
| Q20 | Picks the smaller of 90% viewport or 1200px — fluid with a max width |
| Q23 | fr = fraction of remaining space after fixed tracks; accounts for gap automatically |
| Q26 | Differ when fewer items than columns: auto-fill keeps empties, auto-fit collapses them |
| Q29 | Tracks created automatically for items beyond explicit grid; grid-auto-rows controls height |
| Q32 | 4 lines (one more than the number of columns) |
| Q33 | Subgrid lets children align to parent's grid tracks — aligns card headers across a row |
| Q37 | Grid for 2D / page-level; Flex for 1D / component-level |
| Q39 | Card is display: flex; flex-direction: column; — content area gets flex: 1 |
| Q46 | Nearest ancestor with position ≠ static (or transform/filter); falls back to initial containing block |
| Q48 | Fixed = always relative to viewport; sticky = relative until scroll threshold, then fixed within parent |
| Q49 | transform, filter, or perspective on an ancestor changes the containing block |
| Q51 | Shorthand for top: 0; right: 0; bottom: 0; left: 0 — stretches to fill containing block |
| Q52 | overflow: hidden on ancestor breaks sticky; must set threshold (top/bottom) |
| Q55 | z-index only competes within the same stacking context, not globally |
| Q57 | Modal is inside a DOM subtree whose stacking context has lower z-index than sidebar's context |
| Q59 | Creates stacking context without side effects; contains internal z-index within component |
| Q61 | Creates stacking context + containing block; fixed descendants position relative to it, not viewport |
| Q64 | Media queries respond to viewport; container queries respond to the component's actual container |
| Q67 | inline-size queries width only; size queries both width and height |
| Q69 | Write mobile/stacked layout as default; enhance with @container — unsupported browsers get default |
← Back to 1.8 — CSS Layout Mastery (README)