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拉伸以填充剩余的空间。

有人举个例子可以告诉我吗？

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>

Answer 2

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

在这里，请使用auto代替1fr作为居中的div。

Answer 3

尝试以下代码段。

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

CSS网格-拉伸以填充剩余空间

3 个答案: