Published lesson · 30 minutes

Layout with flex and grid

Objective: Choose Flexbox for one-dimensional alignment and Grid for a two-dimensional set of content cards.

Understand the idea

Layout with flex and grid works best when the learner can explain the reason behind each step, not just copy a result. Flexbox distributes items along one main axis; Grid describes rows and columns together. Both can adapt when content length changes.

A navigation bar needs items along one row, while a directory of services needs cards that wrap into a readable grid. Treat the names and details as invented practice information; the example is for learning a method and does not describe a live service.

A dependable sequence is: Use flex for the navigation, grid for the cards, a sensible minimum card width and `gap` for consistent spacing. Write down the important decision before you begin so another person can follow the reasoning.

Test with a long service name and a narrow viewport. Content should wrap naturally without clipping or horizontal scrolling. Compare the result with the objective, then change one thing at a time if the first attempt does not work.

Sketch a two-column card layout and describe how it should change on a phone. Explain one assumption that would need checking before anyone used a similar result outside the classroom.

Keep a short record of the choices you made and the evidence you used to check them. A useful practice result is understandable by another learner, stays within the stated scope and makes its limitations visible before anyone relies on it.

Worked examples

Layout with flex and grid: practice example

Explore how layout with flex and grid supports the lesson objective with a small synthetic example.

styles.css

.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; } .resource { padding: 1rem; border: 1px solid #555; }

Practice tasks

  1. Explore layout with flex and grid

    Use the worked example for “Layout with flex and grid”. Change one small detail to suit a different synthetic community situation, then explain what you expected and how you checked whether the change still met the lesson objective.

  2. Build a CSS practice example

    Create a small practice result that demonstrates this objective: Choose Flexbox for one-dimensional alignment and Grid for a two-dimensional set of content cards. Use only synthetic information, keep the first version focused, and write down one limitation that a later version should address.

  3. Review and explain the result

    Review your “Layout with flex and grid” result as if another learner will use it without your explanation. Identify one strength, one exact point that may be unclear, and a revision that would make the result easier to understand or use.

Layout with flex and grid becomes easier when you use flex for the navigation, check the result and explain the choice to another learner.

Course overview