The definitive guide to how CSS layout builds the shape of every web page, from flow to modern systems

CSS layout is the set of rules that decides where every element appears and how it shares space. When a browser renders a page, it turns HTML into boxes and then uses CSS to place, size, and align those boxes. The result is the visible shape of the page: the header, the columns, the gaps, and the responsive behavior at every width. Understanding that process makes debugging and design far more predictable.

From document flow to a visual shape

By default, browsers follow normal flow. Block elements stack vertically and take the full available width, while inline elements sit inside lines of text. Margins, borders, and padding add space around content, and that spacing begins to form the page’s silhouette. The vertical rhythm you see on a blog or article is mostly normal flow plus consistent spacing and typography.

Flow is not just a legacy behavior. It is a reliable foundation. Many layouts are simply well-tuned blocks with clear hierarchy, readable line lengths, and intentional white space. When you understand flow, you can decide when to step outside it and which tool to reach for.

The box model: the smallest unit of shape

Every element is a box. The content box holds text, images, or child elements. Around it sit padding, border, and margin. Together, these layers define the element’s footprint. The browser calculates each layer to decide how much space an element needs and how it interacts with its neighbors.

Two behaviors matter in daily work:

• content-box (default in most setups): width and height apply to the content only, and padding and border add to the total size.
• border-box: width and height include padding and border, making sizing more intuitive.

Modern resets often set box-sizing: border-box on all elements so widths behave as designers expect. This single change prevents many layout surprises, especially when mixing fixed and fluid components.

Positioning: lifting and anchoring elements

The position property lets you move an element out of normal flow or anchor it to a reference. Static is the default. Relative keeps the element in flow but creates a positioning context for children. Absolute removes the element from flow and places it relative to the nearest positioned ancestor. Fixed anchors to the viewport, and sticky combines flow with a threshold-based offset while scrolling.

Positioning is powerful for overlays, tooltips, and sticky headers, but it is not a full layout system. Use it for targeted adjustments rather than page-wide structure.

Floats and clears: the historic layout method

Before modern layout tools, floats handled multi-column designs. A floated element shifts to one side, and following content wraps around it. Clear prevents content from running beside a float. Floats still appear in legacy code and in simple text-wrapping cases, but they were never meant for page-level structure. If you maintain older codebases, you will meet them; for new work, prefer Flexbox or Grid.

Flexbox: one-dimensional alignment and distribution

Flexbox arranges items along a single axis: either a row or a column. The parent becomes a flex container with display: flex or inline-flex, and children become flex items. Flexbox excels at aligning content, distributing space, and handling wrapping when needed.

Core concepts include:

• Main axis vs cross axis: alignment and justification depend on which axis you target.
• Flex sizing: flex-grow, flex-shrink, and flex-basis control how items share space and how they respond to available room.
• Alignment: justify-content and align-items handle spacing and centering along each axis.
• Wrapping: flex-wrap allows items to move to new lines when the container is not wide enough.

Use Flexbox for component-level layouts: navigation bars, card rows, form rows, and toolbars. It is predictable and ideal for aligning items within a single line or a wrapped list.

Grid: two-dimensional structure and placement

CSS Grid handles rows and columns at the same time. With display: grid, you define tracks using grid-template-columns and grid-template-rows. Items can span multiple tracks and be placed explicitly with line numbers or areas. Grid is the best tool when you need a true page skeleton or complex component layouts that must align in both directions.

Helpful features include:

• Track sizing: fixed lengths, fractions (fr), percentages, and functions like minmax() and repeat().
• Auto placement: the browser can place items automatically while respecting the track structure.
• Alignment: justify-items, align-items, and their content-level counterparts fine-tune placement inside cells.
• Responsive templates: auto-fit and auto-fill with minmax() create fluid grids without media queries.

A common page pattern is a grid with a header, sidebar, main content, and footer. Grid makes this pattern explicit, easy to reorder at different breakpoints, and consistent across components.

Sizing, spacing, and alignment: shaping the visible page

Layout is not only about placement. The visible shape depends on sizing and spacing choices:

• Length units: px for precision, percentages for fluid behavior, rem for scale relative to root font size, and vw/vh for viewport-based sizing.
• Intrinsic sizing: min-content, max-content, and fit-content() let the browser derive sizes from content and constraints.
• Spacing: consistent margins and paddings create rhythm. Logical properties like margin-inline and padding-block adapt spacing to writing modes.
• Alignment utilities: centering is easiest when the container controls alignment, not the child.

These choices affect how elements breathe, how columns feel, and how the page reads at different sizes.

Responsive layout: designing for many viewports

Responsive design keeps content readable and useful across devices. Start with fluid foundations: percentage widths, flexible grids, and content that scales naturally. Then apply breakpoints to adjust structure when needed, not just to resize text.

Practical strategies:

• Mobile-first: build the simplest layout first, then enhance it for larger screens.
• Container queries: style components based on their container width rather than the viewport, which improves reuse.
• Fluid typography and spacing: use clamp() to scale values smoothly between minimum and maximum sizes.
• Content priority: reorder or collapse sections at breakpoints to match user goals on each device.

When your base layout is flexible, breakpoints handle structural shifts instead of patching brittle fixed designs.

Layering, stacking, and painting order

Layout is only part of the story. The browser also decides what appears in front and what fades behind. Stacking contexts form when you use properties like position, opacity, z-index, transforms, and certain filter effects. Inside a context, z-index controls order. Between contexts, the document order and the creation rules decide which context paints first.

When elements seem to “disappear” or overlays misbehave, the cause is often an unintended stacking context. Defining clear layers and limiting the number of z-index values keeps the visual order predictable.

Putting it together: building a simple page

A reliable approach is to move from structure to detail:

• Define the skeleton: choose Grid for a two-dimensional page layout or Flexbox for a one-dimensional component layout.
• Set sizing rules: prefer border-box, use relative units, and let content drive width where possible.
• Control spacing: adopt consistent paddings, gaps, and margins to build rhythm.
• Align intentionally: let the container own alignment, not scattered margins on children.
• Make it responsive: start fluid, then use breakpoints or container queries to adjust structure.
• Check stacking: verify overlays, modals, and sticky elements with a quick inspection of stacking contexts.

With these steps, you create pages that are maintainable, accessible, and visually coherent.

Why CSS layout is the foundation of every design

CSS layout is how a page gets its shape. Flow sets the baseline. The box model defines each element’s footprint. Positioning, floats, Flexbox, and Grid provide different strategies for placing and aligning those boxes. Sizing and spacing turn structure into rhythm, and responsive techniques keep that rhythm intact across devices.

When you think in terms of boxes, axes, and constraints, layout becomes a clear problem you can solve with the right tool. That mindset is the foundation of every polished web page and the reason modern CSS gives you so many ways to build resilient, beautiful interfaces.