Gaps are always (1rem), the maximum width of the outer container is 1140px (71.25rem).
Defaults
{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "66b1cdc9e9ac2", url: "" }) }}
No widths but within a constraining grid width
{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "66b236e46109c", url: "" }) }}
Small screen sizes
Minimum-width: 576px
{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "66b236e46117a", url: "" }) }}
Medium screen sizes
Minimum-width: 768px
{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "66b236e46138f", url: "" }) }}
Large screen sizes
Minimum-width: 992px
{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "66b236e46140c", url: "" }) }}
Large screen sizes
Minimum-width: 1200px
{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "66b236e461461", url: "" }) }}
Across multiple screen sizes
{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "66b236e4614a0", url: "" }) }}