DDI

<No title set>

This page was updated in v2.1.0

The data-ddi-layout attribute

The data-ddi-layout attribute turns any element into a responsive flex row. Children wrap automatically when they can no longer fit at their minimum content width.

Equal columns

Setting data-ddi-layout to any value activates the layout. Without a ratio suffix, all children share equal space.

Two equal columns

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Did you know?

Lions are the only cats that live in groups, which are called prides.

<div data-ddi-layout="*">
    <div class="body-text">
        <h2 id="the-majesty-of-lions">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
    <div class="body-text">
        <h3 id="did-you-know">Did you know?</h3>
        <p>Lions are the only cats that live in groups, which are
            called prides.</p>
    </div>
</div>
Three equal columns

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Did you know?

Lions are the only cats that live in groups, which are called prides.

The lion’s roar

The roar of a lion can be heard from up to 5 miles away. It is used to communicate with other members of the pride and to warn off potential rivals.

<div data-ddi-layout="*">
    <div class="body-text">
        <h2 id="the-majesty-of-lions-1">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
    <div class="body-text">
        <h3 id="did-you-know-1">Did you know?</h3>
        <p>Lions are the only cats that live in groups, which are
            called prides.</p>
    </div>
    <div class="body-text">
        <h3 id="the-lions-roar">The lion’s roar</h3>
        <p>The roar of a lion can be heard from up to 5 miles away. It is
            used to communicate with other members of the pride and to
            warn off potential rivals.</p>
    </div>
</div>

Ratio layouts

Use ratio values to give one column more space than the other. The notation describes the relative flex weights of the columns.

Last child wider

"1 2", "_ 2", and "1 _" all make the last child twice as wide.

_ 2

Did you know?

Lions are the only cats that live in groups, which are called prides.

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

<div data-ddi-layout="_ 2">
    <div class="body-text">
        <h3 id="did-you-know-2">Did you know?</h3>
        <p>Lions are the only cats that live in groups, which are
            called prides.</p>
    </div>
    <div class="body-text">
        <h2 id="the-majesty-of-lions-2">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
</div>
1 2

Did you know?

Lions are the only cats that live in groups, which are called prides.

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

<div data-ddi-layout="1 2">
    <div class="body-text">
        <h3 id="did-you-know-3">Did you know?</h3>
        <p>Lions are the only cats that live in groups, which are
            called prides.</p>
    </div>
    <div class="body-text">
        <h2 id="the-majesty-of-lions-3">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
</div>
1 _

Did you know?

Lions are the only cats that live in groups, which are called prides.

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

<div data-ddi-layout="1 _">
    <div class="body-text">
        <h3 id="did-you-know-4">Did you know?</h3>
        <p>Lions are the only cats that live in groups, which are
            called prides.</p>
    </div>
    <div class="body-text">
        <h2 id="the-majesty-of-lions-4">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
</div>

First child wider

"2 1", "2 _", and "_ 1" all make the first child twice as wide.

2 1

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Did you know?

Lions are the only cats that live in groups, which are called prides.

<div data-ddi-layout="2 1">
    <div class="body-text">
        <h2 id="the-majesty-of-lions-5">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
    <div class="body-text">
        <h3 id="did-you-know-5">Did you know?</h3>
        <p>Lions are the only cats that live in groups, which are
            called prides.</p>
    </div>
</div>
2 _

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Did you know?

Lions are the only cats that live in groups, which are called prides.

<div data-ddi-layout="2 _">
    <div class="body-text">
        <h2 id="the-majesty-of-lions-6">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
    <div class="body-text">
        <h3 id="did-you-know-6">Did you know?</h3>
        <p>Lions are the only cats that live in groups, which are
            called prides.</p>
    </div>
</div>
_ 1

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

Did you know?

Lions are the only cats that live in groups, which are called prides.

<div data-ddi-layout="_ 1">
    <div class="body-text">
        <h2 id="the-majesty-of-lions-7">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
    <div class="body-text">
        <h3 id="did-you-know-7">Did you know?</h3>
        <p>Lions are the only cats that live in groups, which are
            called prides.</p>
    </div>
</div>

With pictures

Add class="fit" to an image to make it fill its column with a preserved aspect ratio. The image will never be wider than its original size.

A picture in a 1 2 layout
A lion

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

<div data-ddi-layout="1 2">
    <picture>
        <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt="A lion" loading="lazy" decoding="async" width="1280" height="810" class="fit">
    </picture>
    <div class="body-text">
        <h2 id="the-majesty-of-lions-8">The Majesty of Lions</h2>
        <p>Lions are one of the most iconic animals in the world. Known as
            the “king of the jungle,” they are powerful and majestic
            creatures that live in prides and are known for their strength
            and courage.</p>
    </div>
</div>

Stacking layouts

Nest multiple data-ddi-layout rows inside a wrapper for complex multi-row compositions.

Two rows with different layouts
A lion

The Majesty of Lions

Lions are one of the most iconic animals in the world. Known as the “king of the jungle,” they are powerful and majestic creatures that live in prides and are known for their strength and courage.

<div>
    <div data-ddi-layout="*">
        <picture>
            <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt="A lion" loading="lazy" decoding="async" width="1280" height="810" class="fit">
        </picture>
    </div>
    <div data-ddi-layout="_ 2">
        <div class="body-text">
            <h2 id="the-majesty-of-lions-9">The Majesty of Lions</h2>
            <p>Lions are one of the most iconic animals in the world. Known as
                the “king of the jungle,” they are powerful and majestic
                creatures that live in prides and are known for their strength
                and courage.</p>
        </div>
    </div>
</div>
An advanced multi-row layout

The mighty lion

Lions are one of the most iconic animals in the world. Known as the "king of the jungle," they are powerful and majestic creatures that live in prides and are known for their strength and courage.

A lion

Did you know?

Lions are the only cats that live in groups, which are called prides.

The dominant male spends most of his time resting while the females do the majority of the hunting.

They hate hyenas

Lions and hyenas are natural enemies. They compete for food and territory, and they will often fight over a kill.

Hyenas are also known for their distinctive “laughing” call, which can be heard for miles around.

A hyena

A spotted hyena planning evil things.

<div>
    <div data-ddi-layout="*">
        <div class="body-text">
            <h1 id="the-mighty-lion">The mighty lion</h1>
            <p>Lions are one of the most iconic animals in the world. Known as the &quot;king of the jungle,&quot; they are powerful and majestic creatures that live in prides and are known for their strength and courage.</p>
        </div>
    </div>
    <div data-ddi-layout="_ 2">
        <div class="body-text">
            <picture>
                <source srcset="/_astro/lion.D5rx9azq_Z10nLyU.jpg" type="image/jpeg"><img src="/_astro/lion.D5rx9azq_Z10nLyU.jpg" alt="A lion" loading="lazy" decoding="async" width="1280" height="810" class="fit">
            </picture>
            <h2 id="did-you-know-8">Did you know?</h2>
            <p>Lions are the only cats that live in groups, which are called <em>prides</em>.</p>
            <p>The dominant male spends most of his time resting while the females do the majority of the hunting.</p>
        </div>
    </div>
    <div data-ddi-layout="2 1" class="mbs:xl">
        <div class="body-text">
            <h2 id="they-hate-hyenas">They hate hyenas</h2>
            <p>Lions and hyenas are natural enemies. They compete for food and territory, and they will often fight over a kill.</p>
            <p>Hyenas are also known for their distinctive “laughing” call, which can be heard for miles around.</p>
        </div>
        <div>
            <picture>
                <source srcset="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" type="image/avif"><img src="/_astro/hyena.09zHx5hR_Z1Dj0uv.avif" alt="A hyena" loading="lazy" decoding="async" width="3087" height="4631" class="fit">
            </picture>
            <p class="font-size:-1">A spotted hyena planning evil things.</p>
        </div>
    </div>
</div>