Block grid
Auto flow grid of child elements. Mobile has a set rule to stack, while larger viewports auto flow based on min/max width rule on child elements. If the container does not allow for each column to be at least 100px, remaining columns will wrap to the next row. {{isWide}}
.c-block-grid
<!-- the variations for this one occur on the items -->
<ul class="c-block-grid has-giant-btm-marg ">
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
</ul>
| Repo | Count | Location(s) |
|---|---|---|
| texastribune | 4 | |
| state-salaries-draft | 1 |
.c-block-grid--bordered
Has a top/bottom border for separation
<!-- the variations for this one occur on the items -->
<ul class="c-block-grid has-giant-btm-marg c-block-grid--bordered">
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
</ul>
This class isn't referenced anywhere
.c-block-grid--min-100
Tighter grid on desktop (used in trending stories on frontpage)
<!-- the variations for this one occur on the items -->
<ul class="c-block-grid has-giant-btm-marg c-block-grid--min-100">
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
<li class="c-block-grid__item">
<article class="c-story-block c-story-block--stack-from-bp-m" style="max-width:200px">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="t-size-s t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a class="has-text-black-off"><a href="#">The best and worst moments in Texas politics of 2019</a></h3>
</div>
<figure class="c-story-block__image-wrap l-display-block l-width-full">
<a href="#" tabindex="-1"><img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"></a>
</figure>
</article>
</li>
</ul>
| Repo | Count | Location(s) |
|---|---|---|
| texastribune | 2 |