Динамически создать сетку с n столбцами равной ширины

Question

С помощью SCSS, как я могу динамически создать grid с n столбцами , равными ширине?

Текущий подход:

// grid setup
$columns: 4;
$columnGap: 20px;
$rowGap: 30px;

// grid
display: grid;
grid-template-columns: repeat( $columns, auto );
grid-template-rows: auto;
grid-column-gap: $columnGap;
grid-row-gap: $rowGap;

Проблема в том, что auto на самом деле не создает столбцы одинаковой ширины.Вместо этого некоторые столбцы могут быть шире или уже в зависимости от их содержимого.

Мне бы хотелось, чтобы все столбцы имели одинаковую ширину.

Answer 1

Вы можете использовать grid-template-columns: repeat( $columns, 1fr) - посмотрите демонстрацию ниже в vanilla CSS , чтобы показать, что он работает:

:root {
  --columns: 4;
  --columnGap: 20px;
  --rowGap: 30px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: auto;
  grid-column-gap: var(--columnGap);
  grid-row-gap: var(--rowGap);
}

.grid>div {
  background: aliceblue;
}

<div class="grid">
  <div>Some text here</div>
  <div>Some </div>
  <div>Some text</div>
  <div>Some text here</div>
  <div>Some text here</div>
  <div></div>
  <div>Some </div>
  <div>Some</div>
  <div>Some text here</div>
  <div>Some text</div>
  <div>Some text here</div>
</div>