CSS Layout

CSS layout controls where boxes appear, how much space they use, and how they respond when the viewport changes. Browsers begin with normal flow, which places block content in sequence and lets inline content wrap within a line. Flexbox, grid, and positioning change that default behavior for specific layout jobs.

Start with readable HTML in normal flow, then choose the smallest layout system that expresses the design. Flexbox distributes items along one axis, while grid coordinates rows and columns together. Positioning handles overlays, pinned controls, and other elements that need coordinate-based placement.

Syntax at a Glance

Modern layouts often use grid for the page structure and flexbox inside smaller interface regions. The following block shows both tools without fixed widths or removing content from normal flow:

.page-shell {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: 1.5rem;
}

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

The page shell gets two grid tracks: a bounded sidebar and a main area that receives the remaining space. The toolbar's direct children become flex items, so they align vertically and share the horizontal room. Both containers still participate in the surrounding document flow.

CSS Layout Topics

Each guide below focuses on one layer of the layout system. Read display and flow first if block, inline, and containing boxes are still unfamiliar.

• CSS Display and Flow explains normal flow plus the block, inline, and inline-block display values.
• CSS Flexbox covers flex containers, main and cross axes, alignment, wrapping, and flexible item sizing.
• CSS Grid shows how to define tracks, create responsive columns, add gaps, and place items across rows or columns.
• CSS Positioning explains the static, relative, absolute, fixed, and sticky values with visible examples.

How the Layout Tools Fit Together

Normal flow should carry headings, paragraphs, forms, and any content that already reads correctly from top to bottom. It preserves source order and gives the browser room to reflow text when content grows or the screen narrows.

Use flexbox when the immediate problem follows a row or a column. Navigation links, button groups, and card headers fit this model because their spacing depends mostly on their own content. Use grid when items must align across both dimensions, such as a page shell or gallery with shared column lines.

Positioning also works alongside the other layout systems. A grid card can establish a positioning context for an absolute badge, while a flex toolbar can also be sticky. Keep the main structure in flow so that an overlay or pinned element remains a small exception instead of becoming the layout foundation.

Common Pitfalls

• Margin collapse surprises: review CSS display and flow before compensating with extra padding or offsets.
• Mixing floats with flexbox or grid: move structural rows and columns into CSS flexbox or CSS grid, and reserve floats for text wrapping.
• Using absolute positioning as the page layout: keep the structure in flow and use CSS positioning for small overlays or pinned controls.
• Forgetting min-width: 0 in a flex item: use the flexbox overflow fix when long content refuses to shrink.

Common Questions

Should you use flexbox or grid?

Use flexbox when you need to arrange content in one row or one column and distribute space between the items. Use grid when rows and columns must align together. A page can use grid for its outer shell and flexbox for controls inside each region.

When should you use position?

Use position for a box that needs an offset, a local overlay, a viewport-fixed control, or a sticky threshold. Keep ordinary page structure in normal flow, flexbox, or grid because positioned elements can overlap content when their size or surrounding text changes.

Do floats still matter in modern CSS?

Floats still suit their original purpose: placing an image or small callout beside text so the text wraps around it. Flexbox and grid are the current tools for page columns and interface layout. Treat float-based multi-column layouts as legacy CSS.

Does normal flow stop applying once you use flexbox or grid?

No. Only the elements you turn into a flex or grid container change layout mode. Everything else on the page carries on in normal flow, which is why a stray declaration can change less than expected.

Does flex or grid change the box model?

No. Padding, border, and margin behave exactly as before on the container and on every item inside it. Flex and grid change how items are placed and sized relative to each other, nothing more.

Can layout respond to a container's size rather than the viewport?

Yes, with container queries. A component can respond to the width of its nearest queried ancestor instead of the whole viewport, which is what makes one component reusable inside differently sized regions.

MDN Resources

• CSS layout
• Introduction to CSS layout
• Basic concepts of flexbox
• How grid relates to other layout methods

Continue Learning CSS

• Return to the CSS guide for the full language overview.
• Learn CSS selectors to target the elements that layout rules should affect.
• Review the HTML guide to build semantic document structure before arranging it with CSS.