Session 4: CSS Layout

The distinction is simple and it resolves almost every layout question. Flexbox arranges things in one dimension — a row, or a column. It is the right tool when you have a set of items that should sit next to each other, share space, and possibly wrap onto another line: a navigation bar, a row of cards, a group of buttons, a form field with its label. Grid arranges things in two dimensions — rows and columns at once. It is the right tool when you are placing items into a defined structure: a page layout, a gallery, a dashboard, anything where the position of an item matters relative to both axes.

A useful way to hold it: with Flexbox the content decides the layout — items size themselves and share the available space. With Grid the layout decides — you define the tracks first and place content into them. That is why a navigation bar is Flexbox, because its items should adapt to their own widths, while a page skeleton is Grid, because the header, sidebar and footer positions are fixed by the design.

They are not competitors and a real page uses both. The overall page structure is Grid; the navigation inside the header is Flexbox; a row of service cards is Grid; the contents of each card are Flexbox. Recognising the nesting is what makes layout stop feeling arbitrary.

Set `display: flex` on the container and its direct children become flex items. From there four properties do nearly all the work. `flex-direction` sets the axis — `row` is the default, `column` stacks them. `justify-content` distributes space along the main axis: `flex-start`, `center`, `flex-end`, `space-between` (first item at the start, last at the end, gaps between) and `space-around`. `align-items` aligns across the other axis: `stretch` is the default, `center` vertically centres, which is what you want nine times out of ten. `gap` sets space between items, and it has replaced the old habit of adding margins to items — use `gap` and delete the margins.

The property that confuses everyone is the one on the item, not the container: `flex`. Shorthand `flex: 1` means 'grow to fill the available space', which is how you make three cards share a row equally. `flex: 2` makes one item take twice the space of its siblings. Without any `flex` value, items size to their content, which is often what you want for a navigation bar and never what you want for a card row.

Add `flex-wrap: wrap` when items should drop to a new line rather than squash, which matters for anything containing variable-width content on a narrow screen. And note that the classic trick for perfect vertical and horizontal centreing is now three lines — `display: flex; justify-content: center; align-items: center` — where it used to require a paragraph of hacks. This is the single most useful thing Flexbox gave us.

Set `display: grid` on the container, then define the structure. `grid-template-columns` lists the column tracks, and the `fr` unit means 'a fraction of the available space' — `grid-template-columns: 1fr 2fr` gives two columns with the second twice as wide. `repeat(3, 1fr)` gives three equal columns, which is the most common thing you will write. `grid-template-rows` does the same vertically. `gap` works exactly as it does in Flexbox.

The most valuable modern Grid feature is `minmax()` combined with `auto-fit`: `grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))` creates as many columns of at least 260px as will fit, each stretching to share the space, and it reflows automatically as the screen narrows. That single line produces a responsive card grid with no media queries at all, and it is the pattern behind most modern card layouts. Learn it and you will use it constantly.

For a whole-page skeleton, named grid areas are the clearest approach: define `grid-template-areas` with a little ASCII picture — `"header header" "sidebar main" "footer footer"` — then assign each element a `grid-area`. The layout becomes readable at a glance, which is exactly what a client-facing codebase needs. And for placing a single item, `grid-column: span 2` makes it cross two columns, which is how you build an asymmetric feature section.

The navigation bar is Flexbox with `justify-content: space-between` — logo on the left, links on the right — and the links themselves are a Flexbox list with a `gap`. On a phone it collapses, which session six handles. The hero is usually a section with a background image, a constrained-width text block, and Flexbox for vertical alignment; the essential detail is `min-height` rather than a fixed height, so it adapts to content instead of clipping it.

The card row is Grid with the `auto-fit`/`minmax` pattern, and each card is internally Flexbox in `column` direction with `flex: 1` on the description so the buttons line up along the bottom regardless of how much text each card has — a small trick that makes a set of cards look properly designed rather than accidentally aligned. The two-column section is Grid with `grid-template-columns: 1fr 1fr`, or `2fr 1fr` when one side should dominate; it collapses to one column on a phone.

The footer is Grid with three or four columns of links, collapsing to one column on a phone. And the container — a wrapper class with `max-width` and `margin-inline: auto` plus horizontal padding — is the pattern that keeps content from running edge to edge on a wide desktop while staying readable. Every business site you build will use that container class dozens of times, so define it once, early.

Layout debugging is a skill with a method, and the method is: look before you change. Select the misbehaving element in dev tools and the box diagram shows its content, padding, border and margin sizes; if it has a Flex or Grid parent, dev tools draws the container's structure and shows how space was distributed. Reading that for ten seconds usually identifies the problem, whereas editing values at random can take an hour and still leave you not knowing why it works.

The common causes are a short list. An overflow is usually a child wider than its parent, or a missing `box-sizing: border-box`, or an image at its natural size rather than `max-width: 100%`. Vertical alignment not working is usually `align-items` on the wrong axis, or the parent has no height to align within. Items squashed rather than wrapping means `flex-wrap: wrap` is missing. A Grid item in the wrong place means the track definition and the placement disagree. And a margin that appears to do nothing is usually margin collapsing between adjacent block elements.

The professional habit is the temporary outline: add `* { outline: 1px solid red }` while diagnosing. It shows every box's boundary instantly and makes the invisible structure visible. It looks crude and it is faster than any amount of squinting. Remove it before delivery — and this is the reason to keep it out of the committed file, because a red-outlined page in front of a client is not a good look.