如何用inline-grid实现等高行？能否仅用grid属性实现目标布局？

一、让display:inline-grid实现等高行 #

inline-grid是内联级网格容器，但网格的等高行逻辑和grid一致，出现高度不一致可通过以下方式解决：

• 恢复默认的拉伸规则：检查是否覆盖了align-items: stretch（这是网格容器的默认值），如果单元格设置了align-self或容器设置了align-items: start/center，会导致单元格不填充行高，改回align-items: stretch即可。
• 定义行高规则：给inline-grid容器设置grid-template-rows: repeat(行数, 1fr)，让所有行平分容器高度；如果要自适应内容高度，保留grid-template-rows: auto（默认值），此时行会自动取该行最高单元格的高度实现等高。
• 避免固定单元格高度：不要给单个单元格设置固定高度，让行高由网格容器统一控制。

示例代码：

.inline-grid-container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  align-items: stretch;
}

二、仅用display:grid实现“3行网格+中间插入DIV”的布局 #

完全可以不用inline-grid，提供两种实现方式：

方式1：独立网格+分隔DIV（简单直接） #

将每个网格行做成独立的grid块级容器，分隔DIV作为普通块级元素放在行之间，利用块级元素自动换行的特性完成布局：

<div class="grid-row">
  <div class="item">内容1</div>
  <div class="item">内容较多的单元格内容内容内容内容内容</div>
  <div class="item">内容3</div>
</div>
<div class="divider">插入的DIV内容</div>
<div class="grid-row">
  <div class="item">内容A</div>
  <div class="item">内容B</div>
  <div class="item">内容较多的单元格内容内容内容内容内容内容</div>
</div>
<div class="divider">插入的DIV内容</div>
<div class="grid-row">
  <div class="item">内容X</div>
  <div class="item">内容Y</div>
  <div class="item">内容Z</div>
</div>

.grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  margin-bottom: 0;
}
.divider {
  padding: 10px;
  background: #eee;
}

方式2：单个大网格整合所有元素 #

把网格行和分隔DIV都作为同一个大网格的项目，通过定义行模板分配位置：

<div class="big-grid">
  <div class="grid-row-1">
    <div class="item">内容1</div>
    <div class="item">内容较多的单元格内容内容内容内容内容</div>
    <div class="item">内容3</div>
  </div>
  <div class="divider">插入的DIV内容</div>
  <div class="grid-row-2">
    <div class="item">内容A</div>
    <div class="item">内容B</div>
    <div class="item">内容较多的单元格内容内容内容内容内容内容</div>
  </div>
  <div class="divider">插入的DIV内容</div>
  <div class="grid-row-3">
    <div class="item">内容X</div>
    <div class="item">内容Y</div>
    <div class="item">内容Z</div>
  </div>
</div>

.big-grid {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 0;
}
.grid-row-1, .grid-row-2, .grid-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
}
.divider {
  padding: 10px;
  background: #eee;
}

内容的提问来源于stack exchange，提问作者KA.MVP