A grid-based post list is a generic and usually needed displaying method of any of your posts.
- It uses a
gridlayout to display the columns (1, 2, 3) by breakpoints.
Post List
Open in New Window@use 'sprucecss/scss/spruce' as *;
.l-post-list {
&__inner {
--columns: 1;
display: grid;
gap: spacer('l');
grid-template-columns: repeat(var(--columns), minmax(0, 2fr));
@include breakpoint(sm) {
--columns: 2;
}
@include breakpoint(md) {
--columns: 3;
}
}
}<div class="l-post-list">
<div class="container">
<div class="l-post-list__inner">
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/patrick-perkins-ETRPjvb0KM0-unsplash.jpg" alt="assorted notepads" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#tools</a>
</div>
<time datetime="2022-01-03T00:00:00.000Z">Jan 3, 2022</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Update npm Dependencies</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/charlesdeluvio-Lks7vei-eAg-unsplash.jpg" alt="man using MacBook" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#accessibility</a>
</div>
<time datetime="2022-01-31T00:00:00.000Z">Jan 31, 2022</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Should We Open Links in a New Tab?</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg" alt="assorted-color abstract painting" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#reading-list</a>
</div>
<time datetime="2021-10-02T00:00:00.000Z">Oct 2, 2021</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Design Systems Book – A Great Starting Point</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/domenico-loia-hGV2TfOh0ns-unsplash.jpg" alt="white printer paper on white table" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#javascript</a>
</div>
<time datetime="2021-01-30T00:00:00.000Z">Jan 30, 2021</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Is jQuery Really a Bad Choice Today?</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/markus-spiske-hvSr_CVecVI-unsplash.jpg" alt="computer coding screengrab" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#laravel</a>
</div>
<time datetime="2021-09-28T00:00:00.000Z">Sep 28, 2021</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Generating Incremental Usernames</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/sigmund-4UGmm3WRUoQ-unsplash.jpg" alt="white printer paper on white table" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#notes</a>
</div>
<time datetime="2021-04-06T00:00:00.000Z">Apr 6, 2021</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Designing in the Browser</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/vipul-jha-a4X1cdC1QAc-unsplash.jpg" alt="black and blue lighted computer keyboard" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#laravel</a>
</div>
<time datetime="2020-11-17T00:00:00.000Z">Nov 17, 2020</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">5 Laravel E-commerce Packages</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/ux-indonesia-WCID2JWoxwE-unsplash.jpg" alt="person holding white printer paper" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#accessibility</a>
</div>
<time datetime="2020-09-22T00:00:00.000Z">Sep 22, 2020</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">What Is the Accessibility Tree?</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
<div class="post-card">
<img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/yancy-min-842ofHC6MaI-unsplash.jpg" alt="a git tree with three branches" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#tools</a>
</div>
<time datetime="2020-07-07T00:00:00.000Z">Jul 7, 2020</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Run Custom Commands with Prepros</a>
</h2>
<a class="post-author" href="#">
<img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
<span class="post-author__name">by Adam Laki</span>
</a>
</div>
</div>
</div>
</div>
</div>Post List
On this page
