代码之家 › 专栏 › 技术社区 › Ben

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

css-grid sass

Ben · 技术社区 · 5 年前

使用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 不实际生成 相同的

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

0 回复 | 直到 5 年前

kukkuz 5 年前

你可以用 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>

推荐文章

Chris Sherlock · 如何将图像调整为css网格

2 年前

Tagc · 是否可以使用flexbox同时执行“行反转”和“列反转”之类的操作?

6 年前

Tv's Very Own · 网格行间距未应用百分比

6 年前

arw89 · CSS网格中的纯CSS箭头div

6 年前

Arie B · 使用html节标记时在css网格中提供相同的css属性

6 年前

ctaylordev94 · CSS网格行属性由Less[重复]错误编译

6 年前

techguy2000 · css网格单元格内容溢出不工作

6 年前

techno geek · css网格布局的水平滚动

6 年前

dkrasniy · Flexbox换行仅第一列,带溢出滚动

6 年前

WoJ · 如何使用Vue构建动态CSS网格?

6 年前