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)-在原始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>

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

1 个答案: