如何使用CSS实现首篇博客全宽展示其余博客双列网格布局

实现方案 #

你可以直接用CSS Grid实现该需求，不需要额外嵌套容器、不需要修改HTML结构，所有博客卡片放在同一个父级容器下即可适配。

示例HTML结构 #

<!-- 博客列表父容器 -->
<div class="blog-list">
  <!-- 首篇最新博客 -->
  <article class="blog-card">最新博客内容</article>
  <!-- 其余博客 -->
  <article class="blog-card">博客2内容</article>
  <article class="blog-card">博客3内容</article>
  <article class="blog-card">博客4内容</article>
  <article class="blog-card">博客5内容</article>
  <!-- 更多博客项 -->
</div>

对应的CSS代码 #

.blog-list {
  display: grid;
  /* 定义网格为等宽两列 */
  grid-template-columns: repeat(2, 1fr);
  /* 调整网格间隙，可按需修改数值 */
  gap: 24px;
  width: 100%;
  max-width: 1200px; /* 父容器最大宽度可按需调整 */
  margin: 0 auto;
}

/* 选中第一个博客卡片，设置跨所有列全宽展示 */
.blog-card:first-child {
  grid-column: 1 / -1; 
}

/* 响应式适配：屏幕宽度小于768px时全部改成单列布局 */
@media (max-width: 768px) {
  .blog-list {
    grid-template-columns: 1fr;
  }
}

原理解释 #

• 父容器开启网格布局后直接定义2等分列，所有子元素默认会按顺序填充到网格中
• 用:first-child伪类选中首篇博客，通过grid-column: 1 / -1声明该元素横跨所有列，后续哪怕你调整父容器的列数，首项都会自动撑满全宽
• 该方案完全适配动态生成的博客列表，不需要额外做逻辑判断

内容的提问来源于stack exchange，提问作者Tempest