CSS Grid布局咨询：大屏3/2项循环，小屏2/1项循环

数据老陈

2026-8-5

实现循环式响应式CSS Grid布局

核心思路

利用CSS Grid的列跨度（grid-column）结合:nth-child()选择器，针对不同屏幕尺寸定义循环周期的项目布局：

大屏（如≥768px）：每5个项目为一个周期（3个一行 + 2个一行）
小屏（如<768px）：每3个项目为一个周期（2个一行 + 1个一行）

代码实现

HTML结构

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <!-- 可继续添加更多项目 -->
</div>

CSS样式

/* 基础Grid容器样式 */
.grid-container {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

/* 小屏布局：2:1循环（每3个项目为周期） */
@media (max-width: 767px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 每个周期的第3个项目占满整行 */
  .grid-item:nth-child(3n + 3) {
    grid-column: 1 / -1;
  }
}

/* 大屏布局：3:2循环（每5个项目为周期） */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 每个周期的第4、5个项目各占1.5列（填满3列宽度） */
  .grid-item:nth-child(5n + 4),
  .grid-item:nth-child(5n + 5) {
    grid-column: span 1.5;
  }
}