如何将文本与行间隙对齐到网格布局CSS？

Question

如图所示，请看到红线，正在扩大网格间隙，我想创建像“ABC”/“XYZ”这样的文本，将中心与网格间隙对齐，这可以吗？或任何想法？谢谢。

Answer 1

使用网格、网格元素的弹性容器和绝对定位来达到网格间隙的提案：

:root {
  --gap: 2rem;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  padding: var(--gap);
  gap: var(--gap);
  background: #5F98F3;
}
.tile {
  position: relative;
  background: #DFECFD;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
}

.tile span {
  position: absolute;
  font-size: 0.8rem;
  font-weight: bold;
  color: red;
  top: 100%;
  height: var(--gap);
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class='grid'>
  <div class='tile'>
    1
    <span>ABC</span>
  </div>
  <div class='tile'>
    2
    <span>DEF</span>
  </div>
  <div class='tile'>
    3
    <span>GHI</span>
  </div>
  <div class='tile'>
    4
    <span>JKL</span>
  </div>
  <div class='tile'>
    5
    <span>MNO</span>
  </div>
  <div class='tile'>
    6
    <span>PQR</span>
  </div>
  <div class='tile'>
    7
  </div>
  <div class='tile'>
    8
  </div>
  <div class='tile'>
    9
  </div>
</div>