Flexbox and grid layout

Modern CSS layout modes like Flexbox and Grid provide powerful tools for creating responsive, flexible layouts. Understanding their algorithms is essential for building a browser engine and optimizing layout performance.

Flexbox algorithm

Flexbox is a one-dimensional layout method for arranging items along a main axis with flexible sizing.

Flexbox excels at distributing space and aligning items within a container, even when their sizes are unknown or dynamic.

Main and cross axis

Flexbox layouts are oriented along two perpendicular axes:

Main axis
Cross axis

The primary axis along which flex items are laid out. Direction is determined by flex-direction.

.container {
  display: flex;
  flex-direction: row; /* horizontal main axis */
}

Main axis properties:

justify-content - Aligns items along main axis
flex-grow - Controls growth along main axis
flex-shrink - Controls shrinking along main axis
flex-basis - Sets initial size along main axis

The axis perpendicular to the main axis.

.container {
  display: flex;
  flex-direction: row; /* vertical cross axis */
  align-items: center;
}

Cross axis properties:

align-items - Aligns items along cross axis
align-self - Overrides alignment for individual items
align-content - Aligns flex lines when wrapping

Flex direction

The flex-direction property establishes the main axis:

row

Main axis runs left to right (or right to left in RTL languages). Items are arranged horizontally.

row-reverse

Main axis runs right to left (or left to right in RTL languages). Items are arranged horizontally in reverse order.

column

Main axis runs top to bottom. Items are arranged vertically.

column-reverse

Main axis runs bottom to top. Items are arranged vertically in reverse order.

Flex basis

The flex-basis property sets the initial size of a flex item before space distribution:

Determine flex basis

Start with the value of flex-basis. If set to auto, use the item’s content size or explicit width/height.

Apply constraints

Respect min-width, max-width, min-height, and max-height constraints.

Calculate hypothetical size

This becomes the item’s hypothetical main size before flex grow/shrink is applied.

.item {
  flex-basis: 200px; /* Start at 200px before growing/shrinking */
}

.item-auto {
  flex-basis: auto; /* Use content size or explicit width */
}

.item-zero {
  flex-basis: 0; /* Start at 0, allowing flex-grow to control size */
}

Setting flex-basis: 0 with flex-grow: 1 distributes space based purely on the grow factor, ignoring content size.

Flex grow

The flex-grow property controls how flex items expand to fill available space:

Calculate free space

Determine remaining space after laying out all items at their flex-basis size.

Sum grow factors

Add up all flex-grow values of items in the container.

Distribute proportionally

Each item receives additional space proportional to its flex-grow value divided by the total.

Apply constraints

Respect min/max size constraints. If an item hits a constraint, distribute its unused space to other items.

.container {
  display: flex;
  width: 500px;
}

.item-1 {
  flex-basis: 100px;
  flex-grow: 1; /* Gets 1/3 of remaining 200px = 166.67px total */
}

.item-2 {
  flex-basis: 100px;
  flex-grow: 2; /* Gets 2/3 of remaining 200px = 233.33px total */
}

.item-3 {
  flex-basis: 100px;
  flex-grow: 0; /* Stays at 100px */
}

Flex shrink

The flex-shrink property controls how flex items shrink when the container is too small:

Calculate overflow

Determine how much the items overflow the container when laid out at flex-basis size.

Calculate scaled shrink factors

Multiply each item’s flex-shrink value by its flex-basis to get its scaled factor.

Distribute proportionally

Each item shrinks proportionally to its scaled shrink factor divided by the total.

Apply constraints

Respect min-size constraints. If an item hits a minimum, remove it from shrinking calculations.

.container {
  display: flex;
  width: 300px;
}

.item-1 {
  flex-basis: 200px;
  flex-shrink: 1; /* Shrinks by (1 * 200) / (1*200 + 2*200) = 1/3 */
}

.item-2 {
  flex-basis: 200px;
  flex-shrink: 2; /* Shrinks by (2 * 200) / (1*200 + 2*200) = 2/3 */
}

Unlike flex-grow, flex-shrink is weighted by the item’s flex-basis. Larger items shrink more in absolute terms.

Complete flexbox layout algorithm

The full flexbox layout algorithm follows these steps:

Generate flex items

Determine which children become flex items. Absolutely positioned children and text nodes are handled differently.

Determine flex direction

Establish main and cross axes based on flex-direction and writing mode.

Calculate flex-basis

Determine the hypothetical main size of each flex item based on flex-basis, content size, and constraints.

Collect items into lines

If flex-wrap is enabled, break items into multiple lines based on container size.

Resolve flexible lengths

Apply flex-grow or flex-shrink to distribute free space or absorb overflow.

Determine cross size

Calculate each item’s cross size based on content, align-items, and align-self.

Align items on main axis

Position items along the main axis using justify-content.

Align items on cross axis

Position items along the cross axis using align-items, align-self, and align-content.

The flexbox specification defines a precise algorithm with many edge cases. Production implementations must handle nested flex containers, baseline alignment, and interactions with other layout modes.

Grid algorithm

CSS Grid is a two-dimensional layout system that divides space into rows and columns.

Grid track sizing

Grid tracks (rows and columns) are sized using a sophisticated algorithm that handles fixed, flexible, and content-based sizing:

Fixed sizing
Flexible sizing (fr)
Content-based sizing
Minmax function

Tracks with explicit sizes in absolute units.

.grid {
  display: grid;
  grid-template-columns: 100px 200px 150px;
  grid-template-rows: 50px auto;
}

The fr unit distributes available space proportionally.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 25% 50% 25% */
}

Tracks sized based on their content using min-content, max-content, or auto.

.grid {
  display: grid;
  grid-template-columns: min-content max-content auto;
}

Sets minimum and maximum track sizes.

.grid {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
}

Track sizing algorithm

The grid track sizing algorithm resolves track sizes through multiple passes:

Initialize track sizes

Set each track’s base size and growth limit based on its sizing function.

Resolve intrinsic sizes

For content-based tracks, measure min-content and max-content sizes of items in the track.

Maximize tracks

Distribute space to grow tracks up to their growth limits, starting with the smallest tracks.

Expand flexible tracks

If there are fr units, distribute remaining space proportionally to their flex factors.

Stretch auto tracks

If space remains and align-content or justify-content allow, grow auto tracks to fill the container.

Grid track sizing can be computationally expensive, especially with spanning items and complex sizing functions. Production engines use caching and incremental updates.

Grid item placement

Items are placed into the grid using automatic or explicit positioning:

Explicit placement
Named areas
Auto placement

Use line numbers or named lines to position items.

.item {
  grid-column: 2 / 4; /* Start at line 2, end at line 4 */
  grid-row: 1 / 3;
}

Define and reference named grid areas.

.grid {
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.item {
  grid-area: header;
}

Let the browser automatically place items using the auto-placement algorithm.

.grid {
  display: grid;
  grid-auto-flow: row; /* or column, row dense, column dense */
}

Item spanning

Grid items can span multiple rows or columns:

Parse span notation

Items can specify spans using the span keyword or explicit line numbers.

.item {
  grid-column: span 2; /* Span 2 columns */
  grid-row: 1 / span 3; /* Start at row 1, span 3 rows */
}

Resolve auto-placement

For auto-placed spanning items, find the first position where the item fits without overlapping.

Handle conflicts

If multiple items occupy the same cells, later items are placed in the next available space.

Grid gaps

The gap property (formerly grid-gap) adds spacing between tracks:

.grid {
  display: grid;
  gap: 20px; /* 20px gap between all rows and columns */
  /* or */
  row-gap: 20px;
  column-gap: 10px;
}

Gaps are added between tracks, not at the edges. A grid with 3 columns and a 10px gap has 2 gaps totaling 20px.

Implementation considerations

When implementing flexbox and grid algorithms:

Measure content sizes

Efficiently measure min-content and max-content sizes by performing layout with different constraints.

Handle circular dependencies

Detect and resolve circular dependencies where item size depends on container size which depends on item size.

Optimize for common cases

Fast-path simple layouts (all fixed sizes, no spanning) before running the full algorithm.

Cache intermediate results

Store track sizes and item placements to avoid recalculation when only some items change.

Performance consideration: Grid layout with many spanning items and intrinsic sizing can require multiple layout passes. Consider using fixed sizes or explicit placement where possible for better performance.

Project checkpoint: Implement flexbox and grid layout algorithms in your browser engine. Handle all flex properties (basis, grow, shrink) and grid features (track sizing, placement, spanning). Test with complex real-world layouts and measure algorithm performance.

HTML & CSS

Layout & Rendering

Flexbox algorithm

Main and cross axis

Flex direction

row

row-reverse

column

column-reverse

Flex basis

Flex grow

Flex shrink

Complete flexbox layout algorithm

Grid algorithm

Grid track sizing

Track sizing algorithm

Grid item placement

Item spanning

Grid gaps

Implementation considerations

Measure content sizes

Handle circular dependencies

Optimize for common cases

Cache intermediate results

​Flexbox algorithm

​Main and cross axis

​Flex direction

row

row-reverse

column

column-reverse

​Flex basis

​Flex grow

​Flex shrink

​Complete flexbox layout algorithm

​Grid algorithm

​Grid track sizing

​Track sizing algorithm

​Grid item placement

​Item spanning

​Grid gaps

​Implementation considerations

Measure content sizes

Handle circular dependencies

Optimize for common cases

Cache intermediate results

Flexbox algorithm

Main and cross axis

Flex direction

Flex basis

Flex grow

Flex shrink

Complete flexbox layout algorithm

Grid algorithm

Grid track sizing

Track sizing algorithm

Grid item placement

Item spanning

Grid gaps

Implementation considerations