ASP Digital Design System

Layout

Gaps are always (1rem), the maximum width of the outer container is 1140px (71.25rem).

Defaults

Open this example in a new tab: layout

<ul class="asp-grid">  
  <li class="asp-grid__item asp-grid__block">.asp-grid__item</li>  
  <li class="asp-grid__item asp-grid__block">.asp-grid__item</li>  
</ul>

No widths but within a constraining grid width

Open this example in a new tab: layout

<div class="asp-grid">  
  <div class="asp-grid__item asp-grid__item--medium-two-thirds">  
    <ul class="asp-grid">  
      <li class="asp-grid__item asp-grid__block">.asp-grid__item</li>  
      <li class="asp-grid__item asp-grid__block">.asp-grid__item</li>  
    </ul>  
  </div>  
</div>

Small screen sizes

Minimum-width: 576px

Open this example in a new tab: layout

<ul class="asp-grid">  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-half">.asp-grid__item--small-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-half">.asp-grid__item--small-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-third">.asp-grid__item--small-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-third">.asp-grid__item--small-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-third">.asp-grid__item--small-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-two-thirds">.asp-grid__item--small-two-thirds</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-third">.asp-grid__item--small-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-third">.asp-grid__item--small-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-two-thirds">.asp-grid__item--small-two-thirds</li>  
</ul>

Medium screen sizes

Minimum-width: 768px

Open this example in a new tab: layout

<ul class="asp-grid">  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-half">.asp-grid__item--medium-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-half">.asp-grid__item--medium-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-third">.asp-grid__item--medium-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-third">.asp-grid__item--medium-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-third">.asp-grid__item--medium-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-two-thirds">.asp-grid__item--medium-two-thirds</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-third">.asp-grid__item--medium-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-third">.asp-grid__item--medium-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-two-thirds">.asp-grid__item--medium-two-thirds</li>  
</ul>

Large screen sizes

Minimum-width: 992px

Open this example in a new tab: layout

<ul class="asp-grid">  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-half">.asp-grid__item--large-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-half">.asp-grid__item--large-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-third">.asp-grid__item--large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-third">.asp-grid__item--large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-third">.asp-grid__item--large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-two-thirds">.asp-grid__item--large-two-thirds</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-third">.asp-grid__item--large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-third">.asp-grid__item--large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-two-thirds">.asp-grid__item--large-two-thirds</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-three-quarters">.asp-grid__item--large-three-quarters</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-three-quarters">.asp-grid__item--large-three-quarters</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-half">.asp-grid__item--large-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-half">.asp-grid__item--large-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-half">.asp-grid__item--large-one-half</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__item--large-one-quarter</li>  
</ul>

Large screen sizes

Minimum-width: 1200px

Open this example in a new tab: layout

<ul class="asp-grid">  
  <li class="asp-grid__item asp-grid__block asp-grid__item--extra-large-one-third">.asp-grid__item--extra-large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--extra-large-one-third">.asp-grid__item--extra-large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--extra-large-one-third">.asp-grid__item--extra-large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--extra-large-two-thirds">.asp-grid__item--extra-large-two-thirds</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--extra-large-one-third">.asp-grid__item--extra-large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--extra-large-one-third">.asp-grid__item--extra-large-one-third</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--extra-large-two-thirds">.asp-grid__item--extra-large-two-thirds</li>  
</ul>

Across multiple screen sizes

Open this example in a new tab: layout

<ul class="asp-grid">  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-half asp-grid__item--medium-one-third asp-grid__item--large-one-quarter">.asp-grid__item--small-one-half .asp-grid__item--medium-one-third .asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--small-one-half asp-grid__item--medium-one-third asp-grid__item--large-three-quarters">.asp-grid__item--small-one-half .asp-grid__item--medium-one-third .asp-grid__item--large-three-quarters</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-third asp-grid__item--large-one-quarter">.asp-grid__item--medium-one-third .asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-half asp-grid__item--large-one-quarter">.asp-grid__block .asp-grid__item--medium-one-half .asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--medium-one-half asp-grid__item--large-one-quarter">.asp-grid__block .asp-grid__item--medium-one-half .asp-grid__item--large-one-quarter</li>  
  <li class="asp-grid__item asp-grid__block asp-grid__item--large-one-quarter">.asp-grid__block .asp-grid__item--large-one-quarter</li>  
</ul>

Published 6 August 2024
Last updated 6 August 2024