Flexbox, Grid & Responsive Design

Choose a layout tool by the shape

Flexbox arranges items along one main axis, making it useful for a navigation row or a group of buttons. Set display: flex on the parent and use gap to space items without adding awkward margins to each child. For a nav that needs to wrap on narrow screens, flex-wrap: wrap can prevent overflow.

.nav-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

Grid is useful when the layout has rows and columns, such as a product-card collection. For your studio page, let the browser fit columns according to the available width: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) creates columns at least 220 pixels wide when possible, sharing remaining space evenly.

Start with mobile, then expand

Mobile-first CSS describes a readable narrow layout by default, then adds changes for wider screens. This avoids squeezing a desktop design onto a phone. Keep content order sensible in HTML; layout should improve presentation, not make the reading order confusing.

A media query applies styles only when a condition is true. The requested breakpoint can compact spacing or change navigation when the viewport is 600 pixels wide or less.

@media (max-width: 600px) {
  .nav-links { flex-wrap: wrap; }
  .products { gap: 0.75rem; }
}

Use the breakpoint to solve a visible problem, not because 600 is a universal device width. The best responsive layout adapts smoothly across many widths.

Test the actual viewport

Open browser DevTools and use its device toolbar, commonly toggled with Ctrl+Shift+M. Resize or select a mobile viewport and check whether navigation wraps, cards remain readable, and the page avoids horizontal scrolling. Test around the breakpoint as well as at one small and one wide size.

In the quest, use flexbox for the navigation and grid for the products, then add a mobile adjustment. If an item clips, inspect its parent width and minimum sizes before adding arbitrary offsets. Responsive design is about fitting the content to available space, and testing reveals where your assumptions fail.

Make the parent/child relationship visible

The layout property goes on the parent, not each child. For a nav row, display:flex sets a main axis (row by default). justify-content distributes space along that axis; align-items aligns along the cross axis. Change flex-direction to column and the axes change with it. Gap separates children without inventing a special margin for the last one.

For cards, a complete adaptable practice rule is:

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
}
.products > * { min-width: 0; }

Grid requires display:grid; grid-template-columns alone does not create a grid. auto-fit chooses how many columns fit. minmax gives a flexible range and 1fr shares remaining space. min(100%, 220px) prevents the minimum itself exceeding an extremely narrow container. Long unbreakable content can still overflow: inspect the content, use appropriate wrapping and constrain images with max-width:100%.

Rehearse narrow defaults and wider enhancement

Ensure HTML includes viewport metadata. Start with one readable column, then enhance when space allows:

.studio-layout { display: grid; gap: 1rem; }
@media (min-width: 600px) {
  .studio-layout { grid-template-columns: 1fr 1fr; }
}

This is mobile-first: narrow is the default, wider gets a min-width enhancement. The earlier max-width example is a narrow-screen override, not the only way to build mobile-first CSS. Use the condition that solves the actual content problem.

Predict, resize, inspect

Create three practice cards and a nav with several links. Predict whether three columns fit in a 700px container given two gaps and the minimum sizes; then resize and inspect. Test 320px, just below/above your breakpoint and a wide window. Look for wrapping nav, readable cards and no horizontal page scroll.

Use DevTools flex/grid overlays to inspect which parent owns the layout. If grid seems ignored, check display:grid and whether the class matches. If a flex item refuses to shrink, inspect its minimum width and long content before adding absolute positioning. Preserve logical HTML order; visual rearrangement should not make keyboard/reading order confusing.

Before the styling assessment, demonstrate flex navigation, a real grid parent, the mobile adjustment and a narrow layout that fits. Explain why each layout tool belongs where you used it.