Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

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>

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 6 August 2024
Last updated 6 August 2024