Как процент работает в минимальной ширине элементов сетки [при использовании fit-content]?

Question

Цель

• Иметь контейнер с сеткой CSS

• Есть 3 столбца, рассчитанных по подгонке (33,33%), чтобы получить одинаковый размерстолбцы

• Возможность дальнейшего контроля / ограничения размера столбца с помощью минимальной / максимальной ширины для отдельных элементов сетки

В частности, я хочуизмените размер столбцов от 33% до 50%, если есть только 2 элемента сетки, , используя min-width .

Фрагмент ниже соответствует целям выше .

.grid {
  width: 780px;
  display: grid;
  grid-template-columns: repeat(3, fit-content(33.33%));
  justify-items: start;
  align-items: stretch;
  border:1px solid #000;
}

.cell {
  min-width:calc(780px / 2);
  height:80vh;
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}

<div class="grid">
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
</div>

Проблема в том, что я использую явное значение: min-width:calc(780px / 2).

Поэтому я попытался использовать процент, например, min-width:calc(100% / 2).Но кажется, что процент в элементе сетки относительно его собственной ширины, а , а не ширины контейнера.

Итак, я попробовал это: min-width:calc(300% / 2), думая, что если 100% - этоширина 1 элемента сетки в подгонке 1/3, тогда 300% / 2 будет примерно 50% минимальной ширины относительно ширины контейнеров.

Но при использовании такого процента, как этот, перекрываются элементы:

.grid {
  width: 780px;
  display: grid;
  grid-template-columns: repeat(3, fit-content(33.33%));
  justify-items: start;
  align-items: stretch;
  border:1px solid #000;
}

.cell {
  min-width:calc(300% / 2);
  height:80vh;
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}

<div class="grid">
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
</div>

Итак, мой вопрос: возможно ли использовать процент в минимальной ширине элемента сетки относительно ширины контейнера?Как?

Answer 1

Будет ли это работать для вас?

.grid {
  width: 780px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-flow: row;
  justify-items: start;
  align-items: stretch;
  border: 1px solid #000;
}

.cell {
  height: 80vh;
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}

<div class="grid">
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div> 
</div>
<div class="grid">
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
</div>

Answer 2

Ваш расчет верен, min-width используется в процентах относительно ячейки сетки, уже определенной 33% контейнера сетки, поэтому вам нужно 300%/2, чтобы иметь 50% НО вы переполните ячейку сетки, котораяопределяется 33%.Чтобы исправить это, вы можете рассмотреть возможность добавления margin-right ко второму элементу, чтобы подтолкнуть его, поскольку вторая ячейка начинается с 33%, а не 50%, как вы можете подумать из-за переполнения.

Поле должно бытьравно 50%, что будет 50% из 33%, то есть 16.5% контейнера, который также 50% - 33%, как показано на рисунке ниже:

.grid {
  width: 780px;
  display: grid;
  grid-template-columns: repeat(3, fit-content(33.33%));
  justify-items: start;
  align-items: stretch;
  border:1px solid #000;
}

.cell {
  min-width:calc(300% / 2);
  height:80vh;
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}
.cell:nth-child(2) {
  margin-left:50%;
}

<div class="grid">
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
  <div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
</div>