Блог

Главная - Вопросы по программированию - CSS Grid динамически назначает столбец сетки или столбцы шаблона сетки

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

#css #flexbox #css-grid

#css #flexbox #css-сетка

Вопрос:

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

В 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, но это просто кажется таким хакерским

Комментарии:

1. Обратите внимание, что gap свойство, разработанное для нескольких моделей блоков, будет заменено на grid-gap . Это уже доступно для flexbox в Firefox. drafts.csswg.org/css-align-3/#gap-shorthand

2. Также смотрите: developer.mozilla.org/en-US/docs/Web/CSS/gap

Ответ №1:

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

ДА.

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

Сетка-конец столбца @ MDN

диапазон 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 может заполняться с помощью grid-auto-flow:dense;