Можно ли воспроизвести класс начальной загрузки 4 col в CSS Grid?

Question

Я пытаюсь скопировать класс .col начальной загрузки 4 в CSS Grid.т.е. сделать столбцы равномерно распределенными по строке 12 столбцов

Я использовал создание сетки из 12 столбцов в классе строк и использовал grid-column: span 12 в качестве примера для класса col-sm-12.

Буду признателен за любую помощь.

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

.col {
    grid-column: span auto;
}

Answer 1

Я отвечаю на ваш вопрос, основываясь на своем собственном вопросе с другой проблемой -> Разница между процентами и франками в CSS Grid Layout

:root {
  --grid-columns: 12;
  --column-gap: 10px;
  --row-gap: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
  justify-content: center;
}

[class*=l-] {
  border: 1px solid red;
}

.l-1 {
  grid-column-start: span 1;
}

.l-2 {
  grid-column-start: span 2;
}

.l-3 {
  grid-column-start: span 3;
}

.l-4 {
  grid-column-start: span 4;
}

.l-5 {
  grid-column-start: span 5;
}

.l-6 {
  grid-column-start: span 6;
}

.l-7 {
  grid-column-start: span 7;
}

.l-8 {
  grid-column-start: span 8;
}

.l-9 {
  grid-column-start: span 9;
}

.l-10 {
  grid-column-start: span 10;
}

.l-11 {
  grid-column-start: span 11;
}

.l-12 {
  grid-column-start: span 12;
}

<div class="grid">
  <div class="l-6">Column 1</div>
  <div class="l-6">Column 2</div>
  <div class="l-3">Column 3</div>
  <div class="l-4">Column 4</div>
  <div class="l-3">Column 5</div>
  <div class="l-2">Column 6</div>
  <div class="l-1">Column 7</div>
  <div class="l-10">Column 8</div>
  <div class="l-1">Column 9</div>
  <div class="l-5">Column 10</div>
  <div class="l-5">Column 11</div>
  <div class="l-2">Column 12</div>
</div>

Я думаю, что это охватывает то, что вы хотите достичь, или, по крайней мере, даст вам представление.