html - CSS Grid - 拉伸(stretch)以填充剩余空间

Question

我正在使用 CSS 网格创建一个像这样的简单 3 列布局...

.container {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}

.col1 {
background:red;
text-align:center;
}

.col2 {
background:yellow;
text-align:center;
}

.col3 {
text-align:center;
background:green;
}

<div class="container">

  <div class="col1">
    Column 1
  </div>

  <div class="col2">
    <img src="https://via.placeholder.com/150">
  </div>

  <div class="col3">
    Column 3
  </div>

</div>

我正在尝试进行更改，以便中心 div 仅与其包含的图像一样宽，然后 col1 和 col2 拉伸(stretch)以填充剩余空间。

谁有例子可以给我看？

Answer 1

将 grid-template-columns 更改为 1fr auto 1fr - 请参见下面的演示:

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* changed */
}

.col1 {
  background: red;
  text-align: center;
}

.col2 {
  background: yellow;
  text-align: center;
}

.col3 {
  text-align: center;
  background: green;
}

img {
  display: block; /* remove inline element "space" below image */
}

<div class="container">
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    <img src="https://via.placeholder.com/150">
  </div>
  <div class="col3">
    Column 3
  </div>
</div>