CSS Layouts: Flexbox and CSS Grid

CSS Layouts: Flexbox and CSS Grid

Modern web pages rarely consist of a single column of text. Designers arrange content into cards, sidebars, navigation bars, and multi-row grids. CSS provides two purpose-built layout systems for this work: Flexbox and CSS Grid. Each solves a different class of problem, and professional developers choose between them deliberately.

How Flexbox Works

Flexbox (the Flexible Box Layout Module) arranges items along one axis at a time — either a row or a column. You apply it by setting `display: flex` on a container element. The direct children of that container become flex items and are placed along the main axis. The perpendicular direction is the cross axis.

Key container properties:

• `flex-direction`: sets the main axis (`row` or `column`).
• `flex-wrap: wrap` allows items to flow onto additional lines instead of overflowing.
• `justify-content`: aligns items along the main axis (e.g., `center`, `space-between`).
• `align-items`: aligns items along the cross axis (e.g., `stretch`, `center`).

Key item properties:

• `flex`: shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. Writing `flex: 1` tells each item to grow equally to fill available space.
• `align-self`: overrides `align-items` for one specific item.

For the card gallery lab, you will set `display: flex` and `flex-wrap: wrap` on the gallery container, give each card a `flex` basis (e.g., `calc(33% - 2rem)`), and use `align-items: stretch` so all cards in a row reach the same height. Centering content inside each card is a nested Flexbox pattern: set `display: flex; flex-direction: column; justify-content: center` on the card itself.

How CSS Grid Works

CSS Grid is a two-dimensional layout system. You define explicit rows and columns on a container, then place items into named or numbered cells. Apply it with `display: grid`.

Key container properties:

• `grid-template-columns` and `grid-template-rows`: define the track sizes. The `fr` unit represents a fraction of available space (e.g., `1fr 3fr` creates a narrow and a wide column).
• `grid-template-areas`: assigns readable names to regions of the grid. Each string in the value represents one row; repeated names span multiple cells.
• `gap`: sets spacing between tracks.

Key item properties:

• `grid-area`: assigns an item to a named area declared in `grid-template-areas`.
• `grid-column` and `grid-row`: explicitly place or span an item using line numbers (e.g., `grid-column: 1 / 3` spans from line 1 to line 3).

For the page-layout lab, you will declare a three-row, two-column grid. The `grid-template-areas` value will look like this:

```css

grid-template-areas:

"header header"

"content sidebar"

"footer footer";

```

Each child element receives a matching `grid-area` name. The header and footer span both columns automatically because their name fills both cells in that row.

Choosing Between Flexbox and Grid

A useful rule of thumb: Flexbox is content-out; Grid is layout-in.

Use Flexbox when the number or size of items is unknown at design time and you want the browser to distribute space naturally — navigation links, button groups, or a card gallery where cards can wrap freely. The `flex-wrap` and `justify-content` properties handle variable counts gracefully.

Use Grid when you have a fixed, two-dimensional structure that items must conform to — a full-page shell with header, sidebar, main, and footer, or a dashboard with precisely positioned widgets. `grid-template-areas` makes the structure visible in the CSS itself, which improves maintainability.

The two systems are not mutually exclusive. A common professional pattern is Grid for the outer page shell and Flexbox for components inside grid cells.

Using DevTools to Inspect Layouts

Chrome DevTools and Firefox both include layout overlays. In Chrome, open DevTools, select the Elements panel, and look for the flex or grid badge next to a container element in the DOM tree. Clicking the badge toggles a colored overlay showing tracks, gaps, and item boundaries. Firefox's Grid Inspector panel offers similar visualization with named-area labels.

Use these tools during the lab to verify that items are placed in the correct tracks and that wrapping occurs where you intend. If a card overflows its container, inspect the item's computed `flex-basis` and `min-width` — a `min-width` larger than the basis is the most common cause.

Workplace Safety Note

Screen-based development work involves prolonged static posture and close monitor viewing. Follow ergonomic best practices: position your monitor so the top of the screen is at or slightly below eye level, keep your wrists neutral when typing, and take a short break away from the screen at least once per hour. Proper workstation setup is a recognized occupational health practice in office and lab environments.