如何使用CSS Grid定位特定元素实现自定义布局？

你的核心问题是给所有grid-item固定了宽高，同时网格行列的设置没有匹配目标布局的元素跨度需求，导致元素无法按预期排列。正确的做法是让网格容器控制行列尺寸，通过grid-column/grid-row指定元素的跨越范围。

修改后的代码示例 #

CSS 部分

.grid-container {
  display: grid;
  /* 根据目标布局调整列数，这里以5列为例，可按需修改 */
  grid-template-columns: repeat(5, 1fr);
  /* 定义行高，可根据视觉需求调整数值 */
  grid-template-rows: repeat(4, 80px);
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: red;
  border-radius: 4px;
  /* 移除固定宽高，让网格自动分配空间 */
}

/* 定义不同跨度的元素类，匹配目标布局的区块大小 */
.item-span-2-2 {
  grid-column: span 2;
  grid-row: span 2;
}

.item-span-3-1 {
  grid-column: span 3;
}

.item-span-2-1 {
  grid-column: span 2;
}

.item-span-1-2 {
  grid-row: span 2;
}

HTML 部分

<div class="grid-container">
  <!-- 对应目标布局的大区块 -->
  <div class="grid-item item-span-2-2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  
  <div class="grid-item item-span-3-1"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item item-span-2-1"></div>
  <div class="grid-item"></div>
  
  <div class="grid-item item-span-2-1"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

调整说明 #

1. 若目标布局的列数不是5，直接修改grid-template-columns的repeat参数（比如原代码的13列，就改成repeat(13, 1fr)），同时对应调整各类的span数值（比如跨4列就写grid-column: span 4）。
2. 根据目标设计的区块高度，修改grid-template-rows的行高数值，或者用minmax(auto, 80px)实现自适应行高。
3. 可通过给不同区块添加背景色、边框等样式，快速对比是否匹配目标布局的结构。

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