Layouts

Arrange the main regions of a page, then compose cards and other components inside them. Each example includes a live preview and matching HTML.

Posts with a right sidebar

An archive section holds two post summaries, followed by a related-reading sidebar. grid enables the layout, and grid-sidebar-right-344 sets minmax(0, 1fr) 344px from 1040 pixels. Below that, the sidebar stacks after the posts. gap-40 supplies the 40-pixel gap at the default root font size.

Design notes

Give content room to breathe

Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.

Make the hierarchy easy to scan

Use headings to introduce each topic. A consistent type scale helps readers move between the main idea and supporting details.

HTML 
<section aria-labelledby="archive-posts-heading">
  <h2 id="archive-posts-heading" class="fs-32 lh-37 mt-0 mb-24">Design notes</h2>
  <div class="grid grid-sidebar-right-344 gap-40 items-start">
  <section aria-label="Posts">
    <article class="clr-primary-bg p-24 border-r-16 mb-24">
      <h3 class="fs-24 lh-32 mt-0 mb-16"><a href="/docs/wrapper-and-container/">Give content room to breathe</a></h3>
      <p class="mb-0">Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.</p>
    </article>
    <article class="clr-primary-bg p-24 border-r-16">
      <h3 class="fs-24 lh-32 mt-0 mb-16"><a href="/docs/typography/">Make the hierarchy easy to scan</a></h3>
      <p class="mb-0">Use headings to introduce each topic. A consistent type scale helps readers move between the main idea and supporting details.</p>
    </article>
  </section>
  <aside class="clr-primary-bg p-24 border-r-16" aria-labelledby="archive-sidebar-heading">
    <h2 id="archive-sidebar-heading" class="fs-24 lh-32 mt-0 mb-16">Keep exploring</h2>
    <p>Group related reading in the sidebar so readers can explore without losing their place.</p>
    <ul class="list-none pl-0 mb-0">
      <li class="mb-12"><a href="/docs/colors/">Color and readability</a></li>
      <li><a href="/docs/grid/">Responsive grids</a></li>
    </ul>
  </aside>
</div>
</section>

Three column

A section heading followed by three existing vertical cards. flex-md switches the parent to flex from 820 pixels, and flex-1 on each wrapper shares the available row width equally. Below medium the cards stack. gap-24 separates columns, and mb-24 separates stacked cards.

Make room for your next ideas

Epic CSS with 11ty UI Library banner

Give content room to breathe

Design fundamentals · Spacing and rhythm

Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements. Explore spacing and layout

Epic CSS with 11ty UI Library banner

Give content room to breathe

Design fundamentals · Spacing and rhythm

Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements. Explore spacing and layout

Epic CSS with 11ty UI Library banner

Give content room to breathe

Design fundamentals · Spacing and rhythm

Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements. Explore spacing and layout

HTML 
<section aria-labelledby="three-column-title">
  <h2 id="three-column-title" class="text-center fs-32 lh-37 mt-0 mb-32">Make room for your next ideas</h2>
  <div class="flex-md gap-24">
    
    <div class="flex-1 mb-24">
      
<div class="clr-primary-bg p-24 border-r-16" style="max-width: 344px">
    <a href="/docs/wrapper-and-container/" class="flex mb-8"><img class="border-r-16 mb-0" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
    <h3 class="clr-primary mt-0 mb-24">
    <a href="/docs/wrapper-and-container/">Give content room to breathe</a>
</h3>
<div class="mb-24">
<span>Design fundamentals</span> · <span>Spacing and rhythm</span>
</div>
<p class="mb-0">
Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.
<a href="/docs/wrapper-and-container/" class="clr-underline">Explore spacing and layout</a></p>
</div>

    </div>
    
    <div class="flex-1 mb-24">
      
<div class="clr-primary-bg p-24 border-r-16" style="max-width: 344px">
    <a href="/docs/wrapper-and-container/" class="flex mb-8"><img class="border-r-16 mb-0" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
    <h3 class="clr-primary mt-0 mb-24">
    <a href="/docs/wrapper-and-container/">Give content room to breathe</a>
</h3>
<div class="mb-24">
<span>Design fundamentals</span> · <span>Spacing and rhythm</span>
</div>
<p class="mb-0">
Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.
<a href="/docs/wrapper-and-container/" class="clr-underline">Explore spacing and layout</a></p>
</div>

    </div>
    
    <div class="flex-1 mb-24">
      
<div class="clr-primary-bg p-24 border-r-16" style="max-width: 344px">
    <a href="/docs/wrapper-and-container/" class="flex mb-8"><img class="border-r-16 mb-0" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
    <h3 class="clr-primary mt-0 mb-24">
    <a href="/docs/wrapper-and-container/">Give content room to breathe</a>
</h3>
<div class="mb-24">
<span>Design fundamentals</span> · <span>Spacing and rhythm</span>
</div>
<p class="mb-0">
Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.
<a href="/docs/wrapper-and-container/" class="clr-underline">Explore spacing and layout</a></p>
</div>

    </div>
    
  </div>
</section>

The cards share the spacing lesson and retain their 344-pixel maximum width.

Layout section headings use h2; the cards retain their h3 headings.