CSS Layout

There are a number of methods that you can use to lay out your web pages and applications. MDN contains a number of in-depth guides to the different methods, and this page provides an overview of them all.

Normal flow, block, and inline layout

If you are not using a flex or grid layout, then your content is laid out using normal flow, or block and inline layout. These guides will help you to understand the way this layout method works.

Block and Inline layout in normal flow

An introduction to normal flow.

In flow and Out of flow

How to take an item out of flow, and what that does to the layout of your document.

Formatting contexts explained

An introduction to creating a new formatting context.

Flow layout and writing modes

How flow layout works if you use a different writing mode, such as vertical text.

Flow layout and overflow

Understanding and managing overflow.

Introduction to the CSS basic box model

Understanding the box model is a CSS fundamental; this guide explains how it works.

Mastering margin collapsing

Find out why you sometimes end up with less margin than you expect, due to margin collapsing in normal flow.

Understanding CSS z-index

Absolute positioning, flexbox, and grid all result in the stack (elements' relative position on the z-axis) to be manipulable via the z-index property. This article explains how to manage it.

Multi-column layout

Multi-column layout, often referred to as multicol, takes content in normal flow, and breaks it into columns. Find out how to use this layout method in the following guides.

Basic concepts of Multicol

An overview of the basic functionality of multicol.

Styling columns

There is a limited amount of styling opportunities for columns; this guide explains what you can do.

Spanning and balancing

Spanning elements across columns, and balancing the content of columns.

Handling overflow in Multicol

What happens when there is more content than available column space?

Content breaks in Multicol

Dealing with content breaks as the content is split into columns.

Flexbox

CSS Flexible Box Layout, commonly known as flexbox, is a layout model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

Basic Concepts of Flexbox

An overview of the features of Flexbox.

Relationship of Flexbox to other layout methods

How Flexbox relates to other layout methods, and other CSS specifications.

Aligning items in a flex container

How the Box Alignment properties work with Flexbox.

Ordering flex items

Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.

Controlling Ratios of flex items along the main axis

Explaining the flex-grow, flex-shrink, and flex-basis properties.

Mastering wrapping of flex items

How to create flex containers with multiple lines and control the display of the items along those lines.

Typical use cases of Flexbox

Common design patterns that are typical Flexbox use cases.

Grid layout

CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements.

Basic concepts of Grid Layout

An overview of the features of grid layout.

Relationship of Grid Layout to other layout methods

How grid relates to other methods such as alignment, sizing, and flexbox.

Layout using line-based placement

How to place items by numbered lines.

Grid template areas

How to place items using the grid-template syntax.

Layout using named grid lines

How to name lines, and place items by line name rather than number.

Auto-placement in CSS Grid Layout

How to manage the auto-placement algorithm, and understand how the browser places items.

Box alignment in CSS Grid Layout

How to align items, and distribute space on both axes in grid.

CSS Grid, Logical Values and Writing Modes

How to use flow relative, rather than physical, properties and values with grid.

CSS Grid Layout and accessibility

Some accessibility considerations when working with grid layout.

CSS Grid and progressive enhancement

How to ensure your site still works well in browsers that don't support grid.

Realizing common layouts using CSS Grid

Using grid to build some common layouts.

Subgrid

An explanation of the subgrid value, part of Grid Level 2.

Masonry Layout Experimental

An explanation of the masonry layout feature in Grid Level 3.

Alignment

Box alignment in block layout

The alignment properties are specified for block and inline layout, though there is no browser support as yet.

Box alignment in flexbox

The alignment properties first appeared with flexbox; this guide explains how they work.

Box alignment in grid layout

How to align items in grid layout.

Box alignment in multi-column layout

How alignment will work in multicol.