CSS Layout Guide: Flexbox, Grid, and Positioning

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. This guide is part of our CSS guide series.

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(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .page-shell {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  }
}

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

The page shell starts as one column. At a viewport width of 48rem, the media query adds a sidebar and gives the main area the remaining space. Choose that breakpoint by checking when your content has enough room. 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.

Which CSS Layout Method Should You Use?

Use normal flow for text, flexbox for a row or column, and grid for aligned rows and columns. Use positioning for overlays or sticky controls. A page can combine these methods instead of forcing every element into the same layout.

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.

Frequently Asked Questions

Should you use CSS flexbox or grid?

Use CSS flexbox for a row or column whose items share space. Use CSS grid when rows and columns need to line up together. You can use grid for a page layout and flexbox for controls inside it.

When should you use CSS positioning?

Use CSS positioning for an offset, overlay, fixed control, or sticky heading. Keep ordinary page structure in normal flow, flexbox, or grid so growing text and changing screen sizes do not leave elements overlapping.

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?

Flexbox and grid change how a container lays out its direct children. Normal flow still applies elsewhere, including inside those children unless their own layout rules change it.

Do CSS flexbox and grid change the box model?

CSS flexbox and grid keep the box model of content, padding, border, and margin. They change how items are sized and arranged, and the margins between flex or grid items do not collapse as block margins can.

Can CSS layout respond to a container rather than the viewport?

CSS size container queries let a component respond to the dimensions of a suitable ancestor. Declare that ancestor as a query container, then use @container rules to adapt the component inside differently sized regions.

MDN Resources

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