Components

Adaptive grid

The adaptive grid uses CSS container queries to arrange content according to the space available to the grid itself, rather than the viewport. It uses one equal-width column by default. Add one column modifier to use two equal-width columns when the query container's content box reaches the modifier's minimum width.

The wrapper, content, and item classes are required. .adaptive-grid establishes the named query container, its direct .adaptive-grid-content child receives the grid layout, and each direct grid child uses .adaptive-grid-item. A CSS container cannot query its own size to style itself, so the separate inner element makes the component self-contained.

Jump to the interactive example.

Two-column adaptive grid

Resize the available content area to see this example switch between one and two columns.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

					HTML
				

					<div class="adaptive-grid adaptive-grid-columns-2">
    <div class="adaptive-grid-content">
        <div class="adaptive-grid-item border border-radius padding-sm">Item 1</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 2</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 3</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 4</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 5</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 6</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 7</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 8</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 9</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 10</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 11</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Item 12</div>
    </div>
</div>
				

Two-column thresholds

Choose exactly one two-column modifier. Do not combine column modifiers on the same grid.

Modifier	Minimum content-box width
`.adaptive-grid-columns-2`	400px
`.adaptive-grid-columns-2-min-width-600`	600px
`.adaptive-grid-columns-2-min-width-800`	800px

These are the default pixel thresholds. Borders and padding are outside the queried content box and do not count toward the minimum width.

Container size, not viewport size

The same modifier can produce different layouts in the same viewport because each grid queries its own wrapper. The 350px example remains one column, while the 500px example becomes two columns when the viewport is wide enough to apply that width.

Narrow item 1

Narrow item 2

Narrow item 3

Narrow item 4

Narrow item 5

Narrow item 6

					HTML
				

					<div class="adaptive-grid adaptive-grid-columns-2 width-350">
    <div class="adaptive-grid-content">
        <div class="adaptive-grid-item border border-radius padding-sm">Narrow item 1</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Narrow item 2</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Narrow item 3</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Narrow item 4</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Narrow item 5</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Narrow item 6</div>
    </div>
</div>
				

Wide item 1

Wide item 2

Wide item 3

Wide item 4

Wide item 5

Wide item 6

					HTML
				

					<div class="adaptive-grid adaptive-grid-columns-2 width-500-tablet">
    <div class="adaptive-grid-content">
        <div class="adaptive-grid-item border border-radius padding-sm">Wide item 1</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Wide item 2</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Wide item 3</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Wide item 4</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Wide item 5</div>
        <div class="adaptive-grid-item border border-radius padding-sm">Wide item 6</div>
    </div>
</div>
				

Intrinsic sizing

Every track uses minmax(0, 1fr), and direct .adaptive-grid-item children have min-inline-size: 0. This allows long code, tables, and other intrinsically wide content to shrink within a track instead of forcing the grid wider than its container. Consumers can apply an appropriate overflow or wrapping treatment to the content itself.

Consumers compiling Atlas Sass can configure the default gap with $adaptive-grid-gap and the two-column class and threshold pairs with $adaptive-grid-columns-2-variants.

Interactive container size

Use the button groups to apply a column modifier and gap atomics, then use the slider to change this preview's inline size. The slider updates a CSS custom property on the demo parent without changing the viewport. The grid switches to two columns when its queried content box reaches the selected threshold.

Use this interactive example on a wide screen. On narrower screens, the slider is limited to the available space, so larger column thresholds may not be reachable.

Columns

Gap

Preview width 600px