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
@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="/img/blog/8-helpful-sass-mixins-and-functions.png" alt="8 Helpful Sass Mixins and Functions" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#sass</a>
</div>
<time datetime="2023-06-29T00:00:00.000Z">June 29, 2023</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">8 Helpful Sass Mixins and Functions</a>
</h2>
<a class="post-author" href="https://adamlaki.com">
<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="/img/blog/cracking-the-theme-switcher-and-dark-mode.png" alt="Cracking the Theme Switcher and Dark Mode" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#css</a>
<a href="#">#ui</a>
</div>
<time datetime="2023-05-30T00:00:00.000Z">May 30, 2023</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Cracking the Theme Switcher and Dark Mode</a>
</h2>
<a class="post-author" href="https://adamlaki.com">
<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="/img/blog/4-areas-where-modern-css-solves-a-lot.png" alt="4 Areas Where Modern CSS Solves a Lot" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#css</a>
</div>
<time datetime="2023-04-15T00:00:00.000Z">April 15, 2023</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">4 Areas Where Modern CSS Solves a Lot</a>
</h2>
<a class="post-author" href="https://adamlaki.com">
<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="/img/blog/internationalization-right-to-left-support-with-css-frameworks.png" alt="Internationalization (right-to-left support) with CSS Frameworks" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#sass</a>
</div>
<time datetime="2023-02-05T00:00:00.000Z">February 5, 2023</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">Internationalization (right-to-left support) with CSS Frameworks</a>
</h2>
<a class="post-author" href="https://adamlaki.com">
<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="/img/blog/how-to-03.png" alt="How to Reduce Spruce CSS Size" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#how-to</a>
</div>
<time datetime="2023-01-04T00:00:00.000Z">January 4, 2023</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">How to Reduce Spruce CSS Size</a>
</h2>
<a class="post-author" href="https://adamlaki.com">
<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="/img/blog/about-modern-sass.png" alt="About Modern Sass" />
<div class="post-card__body">
<div class="post-card__meta">
<div class="post-card__tags">
<a href="#">#sass</a>
</div>
<time datetime="2022-12-03T00:00:00.000Z">December 3, 2022</time>
</div>
<h2 class="post-card__title">
<a class="post-card__link" href="#">About Modern Sass</a>
</h2>
<a class="post-author" href="https://adamlaki.com">
<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
