动态创建具有 n 列等宽的网格

【问题标题】：Dynamically create a grid with n columns of equal width动态创建具有 n 列等宽的网格
【发布时间】：2019-07-18 13:54:59
【问题描述】：

使用 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 实际上并没有产生相同宽度的列。相反，某些列可能会更宽或更窄，具体取决于它们的内容。

我希望所有列的宽度完全相同。

【问题讨论】：

标签： html css sass css-grid

【解决方案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>

【讨论】：

TLDR：将 auto 替换为 1fr。