展开 CSS 个网格单元格

Question

这是我现在拥有的：

.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>

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

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

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

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

Answer 1

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

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

<flex>

Is a non-negative dimension with the unit fr specifying the track's flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
When appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)).

auto

As a maximum represents the largest max-content size of the items in that track.

As a minimum represents the largest minimum size of items in that track (specified by the min-width/min-height of the items). This is often, though not always, the min-content size.

If used outside of minmax() notation, auto represents the range between the minimum and maximum described above. This behaves similarly to minmax(min-content,max-content) in most cases.

所以 auto 实际上只是 max-content 而 1fr 将占用所有剩余的 space.

.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>

展开 CSS 个网格单元格

Expand CSS grid cell

css

layout

css-grid