Lay the list out in a row — practice exercise

What you'll be asked to do

1. 1.Lay the list out in a rowexercise · easy · 10 min

   Make the list a flex row.

   Passes when: Make the list a flex row.

2. 2.Space the itemsexercise · easy · 10 min · practice plan

   Put a 12px gap between the items.

   Passes when: Put a 12px gap between the items.

3. 3.Stack on narrow screensexercise · easy · 10 min · practice plan

   At 500px wide, stack the items into a column.

   Passes when: At 500px wide, stack the items into a column.

4. 4.Let items growexercise · easy · 10 min · practice plan

   Allow each item to share the space equally.

   Passes when: Allow each item to share the space equally.

5. 5.A responsive card rowexercise · medium · 10 min · practice plan

   A flex row with a gap that stacks below 600px.

   Passes when: A flex row with a gap that stacks below 600px.

6. 6.Fix the layout that never became flexbug fix · easy · 8 min

   The container is still a block.

   Passes when: The container is still a block.

7. 7.Fix the spacing added with marginbug fix · easy · 8 min · practice plan

   Flex containers space children with gap.

   Passes when: Flex containers space children with gap.

8. 8.Fix the query that never matchesbug fix · easy · 8 min · practice plan

   The preview is 500px, so a min-width of 900px never applies.

   Passes when: The preview is 500px, so a min-width of 900px never applies.

9. 9.Fix the grow value on the wrong elementbug fix · easy · 8 min · practice plan

   The items grow, not the container.

   Passes when: The items grow, not the container.

10. 10.Fix the gap not reduced when stackedbug fix · easy · 8 min · practice plan

    The narrow layout should use a smaller gap.

    Passes when: The narrow layout should use a smaller gap.

Between them these tasks cover Media queries, Flexible layout and Spacing.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.