Проблема размещения 3 колонок в двух рядах, как пофиксить?

Question

Необходимо разместить 3 колонки в 1 контейнере но двух рядах, где:

Первые 2 колонки размещаются в 1 ряду и занимают минимально необходимое место для каждой.
Третья колонка размещается в 2 ряду и занимает все свободное место контейнера.

Проблемы на примере ниже:

Пример 1: то, как хочется это видеть (в данном случае, для примера, пришлось задать фиксированную ширину контейнеру, а хочется, чтобы ширина задавалась автоматически, в зависимости от занимаемой ширины колонок).
Примеры 2-4: везде остается место в первом ряду, хотя колонки визуально там нет.

Какие варианты есть?

.group { margin-bottom: 20px; }
.group__row { background: green; }
.group__col_1 { background: violet; }
.group__col_2 { background: aqua; }
.group__col_3 { background: crimson; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<p>Пример 1 (как хочется реализовать, но без фиксированной ширины контейнера):</p>
<div class="group">
  <div class="group__row row" style="display: inline-flex; width: 133px;">
    <div class="group__col group__col_1 col-auto">col 1</div>
    <div class="group__col group__col_2 col-auto">col 222</div>
    <div class="group__col group__col_3 col-12">col 333333</div>
  </div>
</div>

<p>Пример 2:</p>
<div class="group">
  <div class="group__row row" style="display: inline-flex;">
    <div class="group__col group__col_1 col-auto">col 1</div>
    <div class="group__col group__col_2 col-auto">col 222</div>
    <div class="w-100"></div>
    <div class="group__col group__col_3 col">col 333333</div>
  </div>
</div>

<p>Пример 3:</p>
<div class="group">
  <div class="group__row row" style="display: inline-flex;">
    <div class="group__col group__col_1 col-auto">col 1</div>
    <div class="group__col group__col_2 col-auto">col 222</div>
    <div class="w-100"></div>
    <div class="group__col group__col_3 col-12">col 333333</div>
  </div>
</div>

<p>Пример 4:</p>
<div class="group">
  <div class="group__row row" style="display: inline-flex;">
    <div class="group__col group__col_1 col-auto">col 1</div>
    <div class="group__col group__col_2 col-auto">col 222</div>
    <div class="group__col group__col_3 col-12">col 333333</div>
  </div>
</div>

Answer 1

Не совсем понял задачу, но, кажется, такое можно сделать на гридах + использовать min-content/max-content/fit-content:

.section {
  background-color: #eee;
  padding: 10px;
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
  margin-bottom: 10px;
}

.card {
  background-color: #ccc;
}

.card:nth-child(3) {
  grid-column-end: span 2;
}

<section class="section">
  <div class="card">11</div>
  <div class="card">2222222222</div>
  <div class="card">333</div>
</section>

<section class="section">
  <div class="card">11</div>
  <div class="card">2222222222</div>
  <div class="card">333333333333333333333</div>
</section>

С флексами, наверное, только с дополнительными обертками. Например, так:

.section {
  background-color: #eee;
  padding: 10px;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.row {
  display: flex;
  gap: 10px;
}

.card {
  background-color: #ccc;
  flex-grow: 1;
}

.card-3 {
  width: 100%;
}

<section class="section">
  <div class="row">
    <div class="card">11</div>
    <div class="card">2222222</div>
  </div>
  <div class="row">
    <div class="card card-3">333</div>
  </div>
</section>

<section class="section">
  <div class="row">
    <div class="card">11</div>
    <div class="card">2222222</div>
  </div>
  <div class="row">
    <div class="card card-3">3333333333333333333</div>
  </div>
</section>

БЛОГ НА HUSL

Проблема размещения 3 колонок в двух рядах, как пофиксить?

Ответы (1 шт):