CSS guides

{{CSSRef}} 

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.
• 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
  • : 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.