Flexbox, Grid and Responsive Design

🎯Learning Objectives

Level 12 measured the space a box needs. This lesson organizes several boxes into useful layouts. You will choose Flexbox or Grid, reason about axes and tracks, use flexible sizing and adapt a page when the viewport becomes narrower.

The goal is a workshop resource collection that remains readable and operable across screen sizes. You will compare actual rendered examples in a local preview, preserve the source order, and explain why a layout wraps, shrinks or overflows.

🧭Choose the Layout from the Task

Flexbox focuses on arranging items along a main axis. It is useful for action groups, navigation items and a row or column of related content. Grid focuses on a track system across rows and columns, making it useful when the columns should align across several rows.

A wrapping flex container can have several lines, but each line distributes its available space independently. A grid can keep a shared column structure across its rows. Neither tool replaces semantic HTML or guarantees accessibility merely because a particular display value is present.

You can combine them. A resource collection can be a grid, while the actions inside each card use flex. Start with the relationships the content needs instead of forcing the whole page into one layout method.

📦Containers and Direct Items

Applying display: flex or display: grid changes the layout of that element’s direct items. The container controls the overall arrangement. The items can have their own sizing or placement rules. Grandchildren do not all become items in the outer container just because they are nested somewhere within it.

<div class="actions">
  <button type="button">Inspect</button>
  <button type="button">Reset</button>
</div>

.actions { display: flex; gap: 12px; }

In this example, the two buttons are flex items. If you wrap both buttons in another div, that wrapper becomes the direct item unless you also choose a layout for the wrapper. Inspect the actual structure when a layout rule appears to affect the wrong element.

Keep the HTML purpose intact. A nav can be a flex container, and an article collection can use grid. The display value describes layout rather than deciding what the content means.

↔️Flex Axes — Direction Changes the Question

Flexbox has a main axis and a perpendicular cross axis. Flex-direction chooses the main axis: row follows the inline direction and column follows the block direction. In a typical left-to-right horizontal writing mode, a row runs horizontally and a column runs vertically.

This is why “justify-content is horizontal” is an unreliable rule. Its meaning follows the main axis. When flex-direction changes, the physical direction of the main axis changes too. Direction and writing mode can also affect which physical edge is the start.

.actions { display: flex; flex-direction: row; }
.steps { display: flex; flex-direction: column; }

🎯Flex Alignment — Space and Item Position

Justify-content distributes items or space on the main axis when there is space to distribute. Align-items sets the cross-axis alignment of the items in a line. Align-self can adjust an individual item’s cross-axis alignment.

Align-content concerns the distribution of flex lines in a multi-line container with appropriate extra cross-axis space. It is different from align-items. A single line with no relevant extra space may not show the effect you expected.

Auto margins and flexible growth can consume space before a distribution keyword has much visible work to do. When center or space-between appears ineffective, inspect the actual free space and item sizing before changing the property name.

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

This toolbar example assumes a row in ordinary horizontal writing mode. Center aligns items across that row; space-between distributes any relevant remaining main-axis space.

🔄Wrapping and gap — Make Room for More Content

The default flex-wrap value is nowrap. Items remain in one flex line; they may shrink according to their sizing rules, or overflow if their constraints prevent fitting. Flex-wrap: wrap allows additional lines. It does not make long text inside each item automatically safe.

Gap supplies separation between items or lines. It is easier to maintain than manually assigning several asymmetric child margins for a simple action group. A gap still consumes layout space, so include it when predicting whether several items can fit.

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions > button { flex: 0 1 auto; }

A wrapped row should have enough room for its meaningful controls and labels. Try a longer label as well as a smaller viewport. Do not shrink the font until the action is unreadable merely to keep every button in one row.

In the lab, a deliberate non-wrapping row uses fixed item bases so you can observe overflow. That case is a comparison, not a recommended default for a narrow learning page.

📏flex-grow, flex-shrink and flex-basis

Flex-basis supplies a starting main size for flex sizing. Flex-grow describes how positive free space is distributed. Flex-shrink participates in distributing negative free space; its effect also depends on the basis and applicable minimum constraints. These factors are not promises of a final fixed width.

The flex shorthand combines those decisions. Writing the three parts explicitly helps a beginner explain the behavior. In flex: 1 1 140px, the item can grow, can shrink and begins from a 140px basis before the algorithm resolves the layout.

.resource { flex: 1 1 140px; min-width: 0; }
.fixed-action { flex: 0 0 8rem; }

The fixed-action example deliberately neither grows nor shrinks from its basis. Use that choice only when its content and surrounding space support it. Equal growth factors do not always make final widths equal when starting bases or constraints differ.

A basis of auto can use a relevant main-size property or content according to the applicable sizing rules. Avoid treating flex-basis as simply another spelling of min-width.

🧵Minimum Sizes, Long Text and Source Order

A flex or grid item’s automatic minimum can be influenced by its content. A long unbroken token may prevent the item from shrinking as expected. A targeted min-width: 0, suitable wrapping or a local scroller can help, depending on the content.

Use overflow-wrap: anywhere for a token that may break without losing its purpose. A code sample or data table may instead need a local horizontal scroller. Do not globally clip every card to hide the overflow.

Flex order, reversed directions and Grid placement can change the visual arrangement. They do not automatically provide an equally useful reading or keyboard order. Put the meaningful sequence in the document first, then use layout for presentation.

.resource { min-width: 0; }
.resource .identifier { overflow-wrap: anywhere; }

In the lab, cards remain in source order 1 through 6 for every scenario. Use keyboard navigation through their disclosure summaries to compare that sequence with the visual arrangement.

🗂️Grid — Columns, Rows and Tracks

A grid container defines a track arrangement. A column track is the space between adjacent column lines; a row track is the space between adjacent row lines. Grid-template-columns declares explicit column tracks, while grid-template-rows can declare explicit row tracks.

If you supply three columns and enough items for more than one row, automatic placement can create additional rows. Explicit tracks and automatically created tracks are related but different parts of the grid. Do not assume a three-column declaration limits the collection to exactly three items.

.resources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

This example requests three shared columns across the rows. Under the applicable sizing conditions, each 1fr track takes an equal share of the available flexible space after other relevant contributions such as gaps. The minmax lower bound helps avoid an automatic minimum unexpectedly holding the track open.

📍Grid Lines, Spans and Named Areas

Tracks are bounded by lines. An item can be placed between lines or span a number of tracks. For a three-column grid, there are four boundary lines across those explicit columns. The gap is spacing between tracks, not a separate content column.

Named areas can make a small page structure readable, such as a header, main content, related panel and footer. They should describe the intended layout while the HTML source remains meaningful. A named area in a template must form a valid rectangular region.

.featured { grid-column: 1 / -1; }

.layout {
  display: grid;
  grid-template-areas: "main aside";
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}
.main-panel { grid-area: main; }
.related-panel { grid-area: aside; }

In the simple explicit-grid example, 1 / -1 spans from the first to the last explicit grid line. When adapting the layout, preserve the logical source sequence rather than using placement to conceal a poorly ordered document.

🧮fr, minmax and Content Constraints

The fr unit represents a share of flexible grid space. It is not “one fraction of the entire viewport.” The available space is affected by the container, fixed tracks, gaps and the sizing algorithm.

Minmax defines a lower and upper track sizing bound. A common flexible pattern is minmax(0, 1fr), which allows the track’s lower bound to be zero. The item’s own content and overflow behavior still require attention.

.two-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px;
}

If the simple definite-size case has 600px available inside the container and one 16px gap, there are 584px left for these flexible shares under the stated uncomplicated conditions. The 1fr and 2fr tracks divide that flexible space in a 1-to-2 relationship. This arithmetic does not describe every intrinsic-size case.

Avoid declaring several percentage columns that already consume 100% and then forgetting the gaps. Inspect the actual available track space when a row unexpectedly becomes wider than its parent.

🧩auto-fit and auto-fill — A Responsive Track Pattern

Repeat can create tracks automatically based on how many fit. Auto-fill keeps the generated track slots, including empty ones in the relevant case. Auto-fit collapses eligible empty repeated tracks after placement so occupied tracks can use the space. With enough items to occupy the slots, the difference may not be visible.

Choose a sensible minimum so cards remain readable. A minimum wider than the narrow container can itself cause overflow. The following pattern limits the minimum to the container width when the available space is smaller than the preferred card minimum.

.resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 16px;
}

Test the resulting collection with few items as well as many items. Automatic tracks reduce the need for some width breakpoints, but they do not replace all responsive decisions, such as menu behavior, typography or the handling of a large data table.

📱Responsive Foundations — Viewport and Flexible Content

Responsive design adapts a useful page to the available space and interaction context. Include the viewport metadata for ordinary mobile page sizing. Then use flexible components, constraints and appropriate layout changes rather than a collection of unrelated fixed-width pages.

<meta name="viewport" content="width=device-width, initial-scale=1">

.page { width: min(100% - 2rem, 70rem); margin-inline: auto; }
img { max-width: 100%; height: auto; }

Do not disable zoom to make a layout seem fixed. Enlarged text and zoom can change the effective space available to the page. Inspect whether controls wrap, text remains readable and content can still be reached.

A viewport width is a CSS measurement context, not a dependable label for the device model or input method. A wide window can be resized, and a device can use a different orientation. Choose responsive rules according to where the content needs a change.

📐Media Queries — Change the Layout at a Useful Boundary

A media query applies its rules when the stated condition matches. A minimum-width condition can build from a simple narrow layout toward wider arrangements. A maximum-width condition can adapt a wider default downward. Keep the conditions and rule order understandable.

.resources { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 341px) {
  .resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 521px) {
  .resources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

These boundaries are teaching values for the lab, not universal phone and tablet sizes. If two conditions match, the cascade still resolves competing declarations. In this example the later wider rule supplies three columns once its condition matches.

Test at the boundary and on either side of it. A collection that looks correct at 320px and 1000px can still have an awkward transition between them. Media queries query the relevant media environment, which for the lab preview is its own frame viewport.

🔎Reflow, Motion and Interaction Preferences

A responsive review includes more than the number of columns. Check readable text, growing explanations, focus visibility, menus, long content and the order of interactive elements. Do not hide essential information at small widths to make the screenshot look simpler.

Respect reduced-motion preferences where animations are unnecessary for understanding. A transition can become immediate while the state change still works. The shared interview cards in this course keep their question/answer behavior when the animation is reduced.

Use hover as an enhancement rather than the only way to reveal essential content. A keyboard or touch user still needs a usable route. Keep native controls, labels and visible focus when the layout changes.

@media (prefers-reduced-motion: reduce) {
  .card-motion { transition: none; }
}

The rule targets motion that you control. It does not prove the whole page is accessible or every third-party component respects the preference. Verify actual tasks and record the checks you performed.

🧪Premium Interactive — Layout and Viewport Lab

Compare wrapping Flexbox, deliberate non-wrapping Flexbox, a fixed three-column Grid and a responsive Grid. The preview is a separate local document containing six cards in a stable source order. Change its actual frame width to compare how the CSS responds.

If the selected preview is wider than your lesson panel, scroll horizontally in the preview wrapper. This keeps the chosen teaching viewport rather than silently shrinking it. The fixed grid and non-wrapping flex cases are deliberately useful comparisons; they may be awkward on narrow widths.

The responsive Grid uses one column at 240px, two at 420px and three at 640px under its stated rules. The explanation describes expected behavior of the fixed examples; it does not read or certify the browser’s entire layout.

🛠️Debugging — Explain the Layout Constraint

If a flex action row does not wrap, check flex-wrap and item constraints. If a grid collection is wider than its parent, check fixed track minimums, unbroken content and the contribution of gaps. If a breakpoint has no effect, inspect its condition, selector and the later competing rules.

When visual order changes, verify that the intended task can still be followed by keyboard. If long text overlaps, inspect fixed heights and overflow. Prefer a targeted correction to globally hiding content or reducing every font size.

Use browser tools to inspect the actual layout and computed declarations. The lab’s expected-result text supports a guided comparison; a real project needs its own measured review.

💬Interview Questions — Flip to Explain

❓MCQ Practice — Explain the Arrangement

💻Extra Practice — Compare Specific Cases

📌Quick Revision

📖Glossary — Flip to Learn

🏆Final Challenge — Responsive Resource Collection

Build a semantic workshop resource page with six article cards. Keep their source order meaningful. Use Grid for the collection and Flexbox for each card’s action group. Make the narrow default readable, then add wider conditions only where the collection needs more columns.

Use sensible gaps, minimum-size handling, flexible text panels and visible focus. Include a long identifier and a longer explanation in one card. Keep essential information and controls available at every width; do not use CSS reordering as a repair for an illogical document sequence.

Test at 240px, 420px and 640px for the teaching conditions, then test nearby and intermediate widths in your own browser. Try zoom, enlarged text and keyboard navigation through native controls. Record one actual finding and the correction that resolves it.

Success criterion: explain why Flexbox and Grid were chosen, identify the matching responsive rules, demonstrate stable keyboard order and preserve readable content. The next lesson introduces JavaScript fundamentals for adding behavior.