动态创建一个n列宽度相等的网格

Question

使用SCSS，如何动态创建具有相等宽度的n列的grid？

目前的做法：

// 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>