javascript - 如何使用 css 显示网格使我的列号动态化？

Question

我目前正在使用 cssdisplay: grid;并grid-template-columns: auto auto auto auto auto auto auto auto auto auto;显示如图所示的布局。我的问题是如何使我的专栏动态化。目前，我通过放置 10 来对其进行硬编码，auto这指的是 10 列，但我的表列是动态的。有些有 8 列。我已经在我的 Javascript/Jquery 中计算了我的动态列号。我没有像 sass 这样的东西。我需要它来完成这项工作吗？

标签： javascriptjquerycss

Answer 1

1) 通过 JavaScript 更改列数

const cols = 10;
object.style.gridTemplateColumns=`repeat(${cols},auto)`;

2) 更改 PHP 中的列数

<?php $cols = 10; ?>
...
<div class="grid" style="--cols: <?php echo $cols; ?>;">...</div>

和下面的CSS代码

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
}