{{#> web/layout/default title="Grid" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Equal Columns</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Grid Grid--cols-12">
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
        <div class="docs-Box docs-Box--small px-0">1/12</div>
      </div>
      <ul class="Grid Grid--cols-6">
        <li class="docs-Box docs-Box--small">1/6</li>
        <li class="docs-Box docs-Box--small">1/6</li>
        <li class="docs-Box docs-Box--small">1/6</li>
        <li class="docs-Box docs-Box--small">1/6</li>
        <li class="docs-Box docs-Box--small">1/6</li>
        <li class="docs-Box docs-Box--small">1/6</li>
      </ul>
      <div class="Grid Grid--cols-5">
        <div class="docs-Box docs-Box--small">1/5</div>
        <div class="docs-Box docs-Box--small">1/5</div>
        <div class="docs-Box docs-Box--small">1/5</div>
        <div class="docs-Box docs-Box--small">1/5</div>
        <div class="docs-Box docs-Box--small">1/5</div>
      </div>
      <div class="Grid Grid--cols-4">
        <div class="docs-Box docs-Box--small">1/4</div>
        <div class="docs-Box docs-Box--small">1/4</div>
        <div class="docs-Box docs-Box--small">1/4</div>
        <div class="docs-Box docs-Box--small">1/4</div>
      </div>
      <div class="Grid Grid--cols-3">
        <div class="docs-Box docs-Box--small">1/3</div>
        <div class="docs-Box docs-Box--small">1/3</div>
        <div class="docs-Box docs-Box--small">1/3</div>
      </div>
      <div class="Grid Grid--cols-2">
        <div class="docs-Box docs-Box--small">1/2</div>
        <div class="docs-Box docs-Box--small">1/2</div>
      </div>
      <div class="Grid Grid--cols-1">
        <div class="docs-Box docs-Box--small">1</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Responsive Columns</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4">
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Custom Spacing</h2>

    <div class="docs-Stack docs-Stack--start">

      <div
        class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
        style="
        --grid-spacing-x: var(--spirit-space-1200);
        --grid-spacing-y: var(--spirit-space-1200);
      "
      >
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Responsive Custom Spacing</h2>

    <div class="docs-Stack docs-Stack--start">

      <div
        class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
        style="
        --grid-spacing-x: var(--spirit-space-1200);
        --grid-spacing-x-tablet: var(--spirit-space-1100);
        --grid-spacing-x-desktop: var(--spirit-space-1600);
        --grid-spacing-y: var(--spirit-space-1000);
        --grid-spacing-y-tablet: var(--spirit-space-1200);
        --grid-spacing-y-desktop: var(--spirit-space-0);
      "
      >
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Responsive Custom Horizontal Spacing</h2>

    <div class="docs-Stack docs-Stack--start">

      <div
        class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
        style="
        --grid-spacing-x: var(--spirit-space-100);
        --grid-spacing-x-tablet: var(--spirit-space-500);
        --grid-spacing-x-desktop: var(--spirit-space-1100);
      "
      >
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Responsive Custom Vertical Spacing</h2>

    <div class="docs-Stack docs-Stack--start">

      <div
        class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
        style="
        --grid-spacing-y: var(--spirit-space-100);
        --grid-spacing-y-tablet: var(--spirit-space-500);
        --grid-spacing-y-desktop: var(--spirit-space-1100);
      "
      >
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
        <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Grid Item</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Grid">
        <div
          class="GridItem"
          style="
          --grid-item-column-start: 1;
          --grid-item-column-end: 8;
        "
        >
          <div class="docs-Box docs-Box--small">
            Content
          </div>
        </div>
        <div
          class="GridItem"
          style="
          --grid-item-column-start: 9;
          --grid-item-column-end: span 4;
        "
        >
          <div class="docs-Box docs-Box--small">
            Sidebar
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Responsive Grid Item</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Grid">
        <div
          class="GridItem"
          style="
          --grid-item-column-start: 1;
          --grid-item-column-end: 9;
          --grid-item-column-end-tablet: 8;
        "
        >
          <div class="docs-Box docs-Box--small">
            Content
          </div>
        </div>
        <div
          class="GridItem"
          style="
          --grid-item-column-start: 9;
          --grid-item-column-end: span 4;
          --grid-item-column-start-tablet: 11;
          --grid-item-column-end-tablet: span 2;
        "
        >
          <div class="docs-Box docs-Box--small">
            Sidebar
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Nested Grid with Grid Item</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Grid">
        <div
          class="GridItem"
          style="
          --grid-item-column-start: 1;
          --grid-item-column-end: 9;
          --grid-item-column-end-tablet: 10;
        "
        >
          <div class="bg-secondary py-500">
            <div class="Grid">
              <div
                class="GridItem"
                style="
                --grid-item-column-start: 1;
                --grid-item-column-end: span 4;
              "
              >
                <div class="docs-Box docs-Box--small">
                  First Nested Content
                </div>
              </div>
              <div
                class="GridItem"
                style="
                --grid-item-column-start: 6;
                --grid-item-column-end: span 5;
              "
              >
                <div class="docs-Box docs-Box--small">
                  Second Nested Content
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="GridItem"
          style="
          --grid-item-column-start: 9;
          --grid-item-column-end: span 4;
          --grid-item-column-start-tablet: 10;
          --grid-item-column-end-tablet: span 3;
        "
        >
          <div class="docs-Box docs-Box--small">
            Sidebar
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Grid Item with Sidebar in Second Row on Desktop</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Grid">
        <div
          class="GridItem"
          style="
          --grid-item-column-start: 1;
          --grid-item-column-end: 8;
        "
        >
          <div class="docs-Box docs-Box--small">
            Content
          </div>
        </div>
        <div
          class="GridItem"
          style="
          --grid-item-column-start: 9;
          --grid-item-column-end: span 4;
          --grid-item-row-start-desktop: 2;
        "
        >
          <div class="docs-Box docs-Box--small">
            Sidebar
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Responsive Centered Grid Item</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Grid">
        <div
          class="GridItem"
          style="
            --grid-item-column-start: 4;
            --grid-item-column-end: span 6;
            --grid-item-column-start-tablet: 5;
            --grid-item-column-end-tablet: span 4;
            --grid-item-column-start-desktop: 6;
            --grid-item-column-end-desktop: span 2;
          "
        >
          <div class="docs-Box docs-Box--small">
            Centered Content
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Alignment</h2>

    <div class="docs-Stack docs-Stack--start">
      <div class="Grid Grid--cols-2">
        <div class="Grid Grid--cols-1 Grid--alignmentXStretch Grid--alignmentYStretch bg-secondary">
          <div class="docs-Box docs-Box--small">Stretch (default)<br>…</div>
        </div>
        <div class="Grid Grid--cols-1 Grid--alignmentXStretch Grid--alignmentYStretch bg-secondary">
          <div class="docs-Box docs-Box--small">Stretch (default)</div>
        </div>
      </div>
      <div class="Grid Grid--cols-2">
        <div class="Grid Grid--cols-1 Grid--alignmentXLeft Grid--alignmentYTop bg-secondary">
          <div class="docs-Box docs-Box--small">Left<br>…</div>
        </div>
        <div class="Grid Grid--cols-1 Grid--alignmentXLeft Grid--alignmentYTop bg-secondary">
          <div class="docs-Box docs-Box--small">Top</div>
        </div>
      </div>
      <div class="Grid Grid--cols-2">
        <div class="Grid Grid--cols-1 Grid--alignmentXCenter Grid--alignmentYCenter bg-secondary">
          <div class="docs-Box docs-Box--small">Center<br>…</div>
        </div>
        <div class="Grid Grid--cols-1 Grid--alignmentXCenter Grid--alignmentYCenter bg-secondary">
          <div class="docs-Box docs-Box--small">Center</div>
        </div>
      </div>
      <div class="Grid Grid--cols-2 Grid--cols-1">
        <div class="Grid Grid--cols-1 Grid--alignmentXRight Grid--alignmentYBottom bg-secondary">
          <div class="docs-Box docs-Box--small">Right<br>…</div>
        </div>
        <div class="Grid Grid--cols-1 Grid--alignmentXRight Grid--alignmentYBottom bg-secondary">
          <div class="docs-Box docs-Box--small">Bottom</div>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Responsive Alignment</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Grid Grid--cols-2">
        <div class="Grid Grid--cols-1 Grid--alignmentXLeft Grid--tablet--alignmentXCenter Grid--desktop--alignmentXRight Grid--alignmentYTop Grid--tablet--alignmentYCenter Grid--desktop--alignmentYBottom bg-secondary">
          <div class="docs-Box docs-Box--small">Horizontal Alignment<br>…</div>
        </div>
        <div class="Grid Grid--cols-1 Grid--alignmentXLeft Grid--tablet--alignmentXCenter Grid--desktop--alignmentXRight Grid--alignmentYTop Grid--tablet--alignmentYCenter Grid--desktop--alignmentYBottom bg-secondary">
          <div class="docs-Box docs-Box--small">Vertical Alignment</div>
        </div>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}