Установка двух сворачивающихся столбцов в строке, равных по ширине, с центральным столбцом, который уменьшается и увеличивается в соответствии с содержимым

Question

Я пытаюсь добиться определенного расположения столбцов в CSS. Я исследовал использование Flexbox, а также CSS Grid, но все мои коллеги, с которыми я говорил, не могут найти способ заставить эту работу. Я знаю, что могу добиться этого с помощью JavaScript, но я бы хотел этого избежать, если это вообще возможно.

Я хочу создать макет из трех столбцов. Столбец 1 и столбец 3 должны совпадать по ширине (определяется содержимым более длинного столбца), а столбец 2 должен уменьшаться и увеличиваться, чтобы содержимое соответствовало (но не расширялось для заполнения родительского контейнера).

Немного сложно нарисовать картину того, для чего я иду, поэтому, пожалуйста, взгляните на этот CodePen, где я разбил элементарный код и показал макетный пример того, к чему я иду.

Вот структура HTML

<div class="container">
    <div class="col col--Z">Let's match cols, but also collapse!</div>
    <div class="col col--Y">No! ? Let me shrink!</div>
    <div class="col col--Z">Yes!</div>
</div>

А вот структура SCSS

.container {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr auto 1fr;

    .col {
        padding-left: 6px;
        padding-right: 6px;

        &.col--Z {
            background: rgba(0,255,55,0.2);
        }

        &.col--Y {
            background: rgba(0,0,255,0.2);
        }
    }
}

* {
  font-family: 'Arial', Sans-Serif;
}

.container {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr auto 1fr;
}

.container .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}

.container-faked {
  display: grid;
  justify-content: center;
  grid-template-columns: 260px auto 260px;
}

.container-faked .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container-faked .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container-faked .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}

<!-- This is the actual code -->
<h1>CSS Grid Attempt (actual code)</h1>
<div class="container">
  <div class="col col--Z">Let's match cols, but also collapse!</div>
  <div class="col col--Y">No! ? Let me shrink!</div>
  <div class="col col--Z">Yes!</div>
</div>

<br>
<hr>
<br>

<!-- This is the objective, mocked up! -->
<h1>CSS Grid Attempt (faked example)</h1>
<div class="container-faked">
  <div class="col col--Z">Let's match cols, but also collapse!</div>
  <div class="col col--Y">No! ?</div>
  <div class="col col--Z">Yes!</div>
</div>

И CodePen, содержащий как элементарный код (не работает), так и смоделированный пример того, чего я хотел бы достичь, но используя фиксированные значения пикселей для имитации столбцов равной ширины.

https://codepen.io/seanmaisch/pen/MZdqoW

Answer 1

Вы можете использовать display: inline-grid, чтобы сделать ширину контейнера сетки в соответствии с содержимым. Для центрирования вы можете использовать какой-то блок .wrapper.

* {
  font-family: 'Arial', Sans-Serif;
}

.wrapper {
  display: flex;
  justify-content: center;
}

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

.container .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}

<div class="wrapper">
  <div class="container">
    <div class="col col--Z">Let's match cols, but also collapse!</div>
    <div class="col col--Y">No! ? Let me shrink!</div>
    <div class="col col--Z">Yes!</div>
  </div>
</div>