展开 CSS 网格单元格答案

【问题标题】：Expand CSS grid cell展开 CSS 网格单元格
【发布时间】：2021-06-24 12:42:31
【问题描述】：

这是我现在拥有的：

.post {
  display: grid;
  gap: 2rem;
}

.post div:nth-child(1) {
  grid-area: 1 / 1;
}
.post div:nth-child(2) {
  grid-area: 1 / 2 / 1 / 2;
}
.post div:nth-child(3) {
  grid-area: 1 / 3;
}

<div class="post">
  <div class="post__id">
    <p>001</p>
  </div>
  <div class="post__body">
    <a href="..."><p>Lorem ipsum</p></a>
    <p>text…</p>
  </div>
  <div class="post__date">
    <p>01.01.2021</p>
  </div>
</div>

有没有像下面的单元格填充文本一样扩展中间单元格以占用最大空间的好方法？

P.S.：解决这个问题的一种方法：

.post {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1000fr 1fr;
}
/* and comment out the rest of the above code */

但我认为这不是一个好的解决方案……

【问题讨论】：

标签： css layout css-grid

【解决方案1】：

使用grid-template-columns: auto 1fr auto。

这似乎有点奇怪，因为1fr 似乎是一个固定长度，而auto 似乎代表一个动态长度。但是请查看values 以获取grid-template-columns

是非负维数，单位 fr 指定轨道的弹性系数。每个大小的轨道与它的弹性系数成比例地占据剩余空间的份额。
当出现在 minmax() 符号之外时，它意味着自动最小值（即 minmax(auto, )）。

auto

作为最大值表示该项目的最大最大内容大小追踪。
作为最小值表示该项目中的最大最小尺寸轨道（由项目的最小宽度/最小高度指定）。这是通常（但不总是）最小内容大小。

如果在 minmax() 表示法之外使用，auto 表示范围在上述最小值和最大值之间。这表现在大多数情况下，类似于 minmax(min-content,max-content)。

所以auto 实际上只是max-content 而1fr 将占用所有剩余空间。

.post {
  display: grid;
  gap: 2rem;
  grid-template-columns: auto 1fr auto;
}

.post div:nth-child(1) {
  grid-area: 1 / 1;
}
.post div:nth-child(2) {
  grid-area: 1 / 2 / 1 / 2;
}
.post div:nth-child(3) {
  grid-area: 1 / 3;
}

<div class="post">
  <div class="post__id">
    <p>001</p>
  </div>
  <div class="post__body">
    <a href="..."><p>Lorem ipsum</p></a>
    <p>text…</p>
  </div>
  <div class="post__date">
    <p>01.01.2021</p>
  </div>
</div>

【讨论】：