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 .adaptive-grid-columns-2 to use two equal-width columns when the query container's content box is at least 400px wide.

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>
				

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 and two-column threshold with $adaptive-grid-gap and $adaptive-grid-columns-2-min-width.

Interactive container size

Use the button groups to apply the column modifier and gap atomics, then use the slider to change this preview's outer 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 400px; the displayed outer width also includes its border and padding.

Columns

Gap

Preview outer width 600px