Columns & Layouts | Dialtone Design System

Creating Flex Columns

Use d-fl-col{n} to create uniformly sized children within an element.

<dt-stack gap="200" class="d-w100p">
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col1</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col1">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col2</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col2">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col3</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col3">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col4</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col4">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col5</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col5">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">5</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col6</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col6">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">5</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">6</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col7</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col7">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">5</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">6</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">7</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col8</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col8">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">5</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">6</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">7</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">8</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col9</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col9">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">5</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">6</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">7</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">8</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">9</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col10</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col10">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">5</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">6</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">7</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">8</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">9</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">10</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col11</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col11">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">5</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">6</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">7</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">8</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">9</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">10</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">11</dt-stack>
    </div>
  </div>
  <div class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-fl-col12</dt-text>
    <div class="d-cg-100 d-of-auto d-fl-col12">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">4</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">5</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">6</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">7</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">8</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">9</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">10</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">11</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">12</dt-stack>
    </div>
  </div>
</dt-stack>

Flex Column Gaps

Use d-cg{n} to create uniform gaps between flex columns within an element.

<dt-stack gap="200" class="d-w100p">
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-0</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-0">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-1</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-1">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-25</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-25">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-50</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-50">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-75</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-75">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-100</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-100">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-150</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-150">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-200</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-200">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-300</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-300">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-400</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-400">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-600</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-600">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
  <dt-stack gap="100" class="d-p-100 d-bar-400 d-bgc-moderate d-w100p">
    <dt-text as="p" kind="code" size="100">.d-cg-800</dt-text>
    <div class="d-fl-col3 d-of-auto d-cg-800">
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">1</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">2</dt-stack>
      <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bar-300 d-bgc-moderate-opaque">3</dt-stack>
    </div>
  </dt-stack>
</dt-stack>

Centering Objects

This used to be accomplished with d-fl-center, which is deprecated in favor of using Stack.

By default flexed items align to flex-start both horizontally and vertically (effectively top, left). Combine Stack's align and justify utilities to center-center child items within an element.

Classes

Class	Output
.d-fl-col1	> { flex-basis: calc(100% - (var(--fl-gap) 2)); }
.d-fl-col2	> { flex-basis: calc(50% - (var(--fl-gap) 2)); }
.d-fl-col3	> { flex-basis: calc(33% - (var(--fl-gap) 2)); }
.d-fl-col4	> { flex-basis: calc(25% - (var(--fl-gap) 2)); }
.d-fl-col5	> { flex-basis: calc(20% - (var(--fl-gap) 2)); }
.d-fl-col6	> { flex-basis: calc(17% - (var(--fl-gap) 2)); }
.d-fl-col7	> { flex-basis: calc(14% - (var(--fl-gap) 2)); }
.d-fl-col8	> { flex-basis: calc(13% - (var(--fl-gap) 2)); }
.d-fl-col9	> { flex-basis: calc(11% - (var(--fl-gap) 2)); }
.d-fl-col10	> { flex-basis: calc(10% - (var(--fl-gap) 2)); }
.d-fl-col11	> { flex-basis: calc(9% - (var(--fl-gap) 2)); }
.d-fl-col12	> { flex-basis: calc(8% - (var(--fl-gap) 2)); }
.d-cg0	> * { --fl-gap: 0rem !important; }
.d-cg1	> * { --fl-gap: 0.1rem !important; }
.d-cg2	> * { --fl-gap: 0.2rem !important; }
.d-cg4	> * { --fl-gap: 0.4rem !important; }
.d-cg6	> * { --fl-gap: 0.6rem !important; }
.d-cg8	> * { --fl-gap: 0.8rem !important; }
.d-cg12	> * { --fl-gap: 1.2rem !important; }
.d-cg16	> * { --fl-gap: 1.6rem !important; }
.d-cg24	> * { --fl-gap: 2.4rem !important; }
.d-cg32	> * { --fl-gap: 3.2rem !important; }
.d-cg48	> * { --fl-gap: 4.8rem !important; }
.d-cg64	> * { --fl-gap: 6.4rem !important; }

Creating Flex Columns #

Flex Column Gaps #

Centering Objects #

Classes #

Creating Flex Columns

Flex Column Gaps

Centering Objects

Classes