DDI

<No title set>

The WrapGrid

Resize the window to see how the example section layouts change.

Look inside this mdx-document to see the markup for the examples.

Use the WrapGrid component to create a grid layout. The grid will adjust to the available space and wrap the items when there is no more space.

Minimal cell width

There are two variants. One that allows cells shrink to --ddi-space-min-content-width before it wraps the cells. The other variant allows the cells to shrink to half the size of the --ddi-space-min-content-width.

With normal cells
<div class="wrap-grid  undefined">
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" type="image/avif"><img src="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" alt loading="lazy" decoding="async" width="3087" height="4631" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" type="image/avif"><img src="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" alt loading="lazy" decoding="async" width="3087" height="4631" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
</div>
With small cells
<div class="wrap-grid small-cells undefined">
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" type="image/avif"><img src="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" alt loading="lazy" decoding="async" width="3087" height="4631" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" type="image/avif"><img src="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" alt loading="lazy" decoding="async" width="3087" height="4631" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
</div>

Gap

You can add a gap between the cells by setting the gap prop.

With gap
<div class="wrap-grid small-cells undefined" gap="l">
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" type="image/avif"><img src="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" alt loading="lazy" decoding="async" width="3087" height="4631" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" type="image/avif"><img src="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" alt loading="lazy" decoding="async" width="3087" height="4631" class="fit">
    </picture>
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
</div>