如何创建不同行含不同数量元素的CSS Grid布局

下面提供两种常用的CSS实现方案，均能满足需求并支持响应式适配：

方案一：Grid布局（推荐，更直观的网格控制） #

HTML结构 #

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
</div>

CSS代码 #

.grid-container {
  display: grid;
  /* 定义3列等宽网格 */
  grid-template-columns: repeat(3, 1fr);
  /* 元素之间的间距 */
  gap: 1rem;
  padding: 1rem;
}

/* 选中第4、5个元素，让它们各占1.5列，填满3列宽度实现居中 */
.grid-item:nth-child(n+4) {
  grid-column: span 1.5;
}

/* 小屏幕适配：每行显示2个元素 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-item:nth-child(n+4) {
    grid-column: span 1;
  }
}

/* 超小屏幕适配：每行显示1个元素 */
@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

方案二：Flex布局（灵活度高，适合简单换行场景） #

HTML结构 #

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
</div>

CSS代码 #

.flex-container {
  display: flex;
  /* 自动换行 */
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  /* 让行内元素居中对齐 */
  justify-content: center;
}

/* 前3个元素各占1/3宽度，减去间距 */
.flex-item {
  flex: 0 0 calc(33.333% - 1rem);
}

/* 后2个元素各占1/2宽度 */
.flex-item:nth-child(n+4) {
  flex: 0 0 calc(50% - 1rem);
}

/* 小屏幕适配：每行显示2个元素 */
@media (max-width: 768px) {
  .flex-item {
    flex: 0 0 calc(50% - 1rem);
  }
  .flex-item:nth-child(n+4) {
    flex: 0 0 calc(50% - 1rem);
  }
}

/* 超小屏幕适配：每行显示1个元素 */
@media (max-width: 480px) {
  .flex-item {
    flex: 0 0 100%;
  }
}

说明 #

• Grid布局更适合复杂网格场景，代码逻辑清晰，容易调整元素的行列位置；
• Flex布局则更轻量，适合快速实现简单的换行居中效果；
• 两种方案都通过媒体查询实现了响应式适配，可根据实际需求选择。

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