如何实现与参考图片中类似的区块定位布局？

嘿，完全不用抱歉呀！新手刚接触布局有疑问太正常了，这个问题一点都不傻😉

表格确实不太适合这种需要灵活跨行跨列的不规则布局，而CSS Grid正是解决这类问题的最佳方案——它天生就支持元素的跨行、跨列设置，而且能轻松实现内容的精准居中。下面我给你一套具体的实现方案，你可以参考着调整：

核心思路 #

用Grid定义好整体的网格框架，然后给每个区块指定它要占据的行和列范围；同时在每个区块内部用Flex布局，让数字和文本都能完美居中。

代码示例 #

HTML 结构

<div class="grid-container">
  <div class="grid-item item-1">
    <div class="content">
      <span class="number">1</span>
      <p>文本内容1</p>
    </div>
  </div>
  <div class="grid-item item-2">
    <div class="content">
      <span class="number">2</span>
      <p>文本内容2</p>
    </div>
  </div>
  <div class="grid-item item-3">
    <div class="content">
      <span class="number">3</span>
      <p>文本内容3<br>可以换行</p>
    </div>
  </div>
  <div class="grid-item item-4">
    <div class="content">
      <span class="number">4</span>
      <p>文本内容4</p>
    </div>
  </div>
  <div class="grid-item item-5">
    <div class="content">
      <span class="number">5</span>
      <p>文本内容5<br>多行示例</p>
    </div>
  </div>
</div>

CSS 样式

/* 网格容器 */
.grid-container {
  display: grid;
  /* 定义3列，每列宽度自适应（也可以用固定值比如200px） */
  grid-template-columns: repeat(3, 1fr);
  /* 定义行高，这里设置两行基础高度 */
  grid-template-rows: 150px 150px;
  /* 网格之间的间距 */
  grid-gap: 10px;
  max-width: 800px;
  margin: 20px auto;
}

/* 基础区块样式 */
.grid-item {
  background-color: #f0f0f0;
  border-radius: 8px;
  /* 内部用Flex实现内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-align: center;
}

/* 控制每个区块的跨行跨列 */
.item-1 {
  /* 占1行2列 */
  grid-column: span 2;
}
.item-3 {
  /* 占2行1列 */
  grid-row: span 2;
}
.item-5 {
  /* 占1行2列 */
  grid-column: span 2;
}

/* 数字和文本的样式调整 */
.content .number {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}
.content p {
  margin: 0;
  color: #666;
}

关键说明 #

1. 跨行跨列实现：通过grid-row: span N（占N行）和grid-column: span N（占N列）就能轻松让区块扩展到多个网格单元，完全满足你想要的“行扩展到多列”的需求。
2. 内容居中：每个区块内部用display: flex加上justify-content: center和align-items: center，不管数字和文本有多少行，都能保持垂直水平居中，这是表格很难做到的灵活效果。
3. 可扩展性：如果需要调整布局，只需要修改grid-template-columns/rows的参数，或者调整各个item的span值就行，非常灵活。

你可以根据自己的实际需求（比如区块大小、颜色、间距）修改上面的样式参数，慢慢调试就能得到和参考图一致的布局啦～

备注：内容来源于stack exchange，提问作者Соня Сапиро