使用HTML/CSS添加新博客文章预览的更简单方法？

我目前使用Cargo.site作为网站主机/构建器运行博客。我基本上是从零开始构建的，我对此很满意，除了每次我在主页上添加一篇新博客文章的缩略图+摘要，我都要花很长时间修改代码——将主页上的文章一个接一个地“向下”移动，以便为顶部的新文章腾出空间，如果这样做有意义的话

帖子如下所示，分为3列：

---

我认为这是一个你应该回答的问题
<div grid-row="" grid-pad="3.5" grid-gutter="7" grid-responsive="““”&quot;">



<div grid-col="x10" grid-pad="3.5"><a href="y-not-at-home-the-festival-turned-virtual" rel="history" class="image-link">{image 58}</a><div style="text-align: left" class="blonk"><h1><a href="y-not-at-home-the-festival-turned-virtual" rel="history"><b id="green">LIVE:</b><br>



<br>

Y NOT AT HOME: THE &nbsp;FESTIVAL TURNED VIRTUAL<br>

</a><hr><small>The Derbyshire festival has a more remote approach this year, but keeps the spirit alive. We speak to musician Lauran Hibberd about the change.</small></h1></div></div>





<div grid-col="x10" grid-pad="3.5"><a href="retroview-the-moon-antarctica-2000" rel="history" class="image-link">{image 57}</a><div style="text-align: left" class="blonk"><h1><a href="retroview-the-moon-antarctica-2000" rel="history"><b id="blue2">REVIEW:</b><br>



<br>

THE MOON &amp; ANTARCTICA (2000) - RETROVIEW<br>

</a><hr><small>Mary looks back at Modest Mouse’s third album on its 20th anniversary.</small></h1></div></div>



 <div grid-col="x10" grid-pad="3.5"><a href="live-music-in-virtual-reality-melodyVR-brings-concerts-home" rel="history" class="image-link">{image 56}</a><div style="text-align: left" class="blonk"><h1><a href="live-music-in-virtual-reality-melodyVR-brings-concerts-home" rel="history"><b id="redd">FEATURE:</b><br>



<br>

LIVE MUSIC IN VIRTUAL REALITY: MELODYVR BRINGS CONCERTS HOME<br>

</a><hr><small>With live music currently a distant memory, MelodyVR helps to rejuvenate the experience from the comfort of our sofas.</small></h1></div></div>



</div>