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

Copy code: 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

Copy code: 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

Copy code: 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

Copy code: 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

Copy code: 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

Copy code: 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

Copy code: 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>

Submit a request

Request a change or addition to the design system use this form.


Published 6 August 2024
Last updated 6 August 2024