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.
Backwards compatibility of Flexbox
Browser status of Flexbox, interoperability issues, and supporting older browsers and versions of the spec.

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 acessibility 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.
Realising 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
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.