CSS Grid Динамически назначать столбец сетки или столбцы сетки шаблона

Question

Мне нужно иметь возможность динамически назначать номера столбцов, которые элемент будет занимать в строке сетки.

В flex я мог бы просто сделать что-то вроде дать ему имя, например .col-sm-25 (образно, я знаю), и придать ему стиль flex-basis: 25%.Однако у flex нет свойства grid-gap, поэтому я пытаюсь выяснить, есть ли способ сделать это в css grid.

Так как он динамически создается редактором в нашей системе CMS, и они могутНе выбирайте контейнер для добавления предметов, grid-template-columns действительно может быть только repeat(12, 1fr) или что-то в этом роде.

Есть ли способ, которым я могу сказать, чтобы элемент .col-sm-25 занял следующие 4Доступен столбец в строке сетки?Я не знаю, в каком порядке будут поступать предметы, поэтому не могу сказать, что было бы grid-column-start.

Я знаю, что можно сделать во flebox, но это так хакерски

Answer 1

Можно ли как-то сказать, чтобы элемент .col-sm-25 занял следующие 4 доступных столбца в строке сетки?

Да.

Просто определите grid-column-end как span 4

Конец столбца сетки @ MDN

span n

Вносит диапазон сетки в размещение элемента сетки таким образом, чтобы конечный край столбца области сетки элемента сетки составлял n строк от начального края .

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.box {
  border: 1px solid green;
  height: 50px;
}

.span-2 {
  grid-column-end: span 2;
  background: green;
}

.span-3 {
  grid-column-end: span 3;
  background: lightblue;
}

.span-4 {
  grid-column-end: span 4;
  background: lightgreen;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-2"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-3"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Обратите внимание, как показано, это может привести к "разрыву" сетки, когда в строке осталось менее 4 столбцов * .

Однако css-grid может back-fill с использованием grid-auto-flow:dense;