Skip to content

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

<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

<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

<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

<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

<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

<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

<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