CSS Grid - 拉伸以填充剩余空间答案

【问题标题】：CSS Grid - Stretch to fill remaining spaceCSS Grid - 拉伸以填充剩余空间
【发布时间】：2019-06-17 16:51:11
【问题描述】：

我正在使用 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 拉伸以填充剩余空间。

谁能给我举个例子？

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：

【解决方案2】：

grid-template-columns:1fr auto 1fr;

在这里，使用auto 而不是1fr 作为居中的 div。

【讨论】：

【解决方案3】：

试试下面的sn-p。

.container {
  display:grid;
  grid-template-columns:1fr auto 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 width="300px" height="300px" src="https://via.placeholder.com/150">
  </div>

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

</div>

【讨论】：