CSS Grid - растянуть, чтобы заполнить оставшееся пространство

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 для центрированного деления.

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>