CSS 网格布局动态行

Question

我想知道是否有办法在没有 Javascript 的情况下将动态数量的行和列分配给网格布局？我看到的每个例子也包括一些Javascript，到目前为止，我正在研究HTML和CSS的简单知识(学生(。我想要实现的是，当我添加内容时，我不想在我的 CSS 中创建新行。我也不知道这是否可能，但是如果我可以只重复两行作为基本布局，那就太好了，我希望在我的行之间交替使用颜色，除了使用它们来放置其他内容之外，没有其他属性。

编辑：

好吧，我试图建立一个网格

<div class="grid-container"></div>
<div class="grid-item1"></div>
<div class="grid-item2"></div>
<div class="grid-item3"></div>...

这样做的问题是我必须为我想要的每一行或每一列手动添加一个新的网格项。我重复找到了部分解决方案。

.grid-container {
grid-template-rows: repeat(20, 10px);
}

但我不确定这是否意味着当我用完行时，我将留下滚动的白色区域，我将不得不更改我期望的 CSS，或者我是否只需要回到手动添加新网格项。我正在尝试找到一种方法来指定我的 CSS 文件，制作未知数量的行，以便在添加内容时不必手动添加网格项。

Answer 1

我想要实现的是，当我添加内容时，我不想 必须在我的 CSS 中创建新行。

我认为您描述的内容可以使用grid-auto-rows来完成。

来自 MDN：

如果网格项定位到未明确大小的行中 通过网格模板行，将创建隐式网格轨道来保存它。 这可以通过显式定位到以下行中来实现 超出范围，或通过自动放置算法创建额外的 行。

Grid-auto-rows允许您设置隐式行轨道的大小。

在下面的示例中，我有一个基本的四列网格。网格行是隐式创建的，其大小至少为20px，最多为auto或内容的最大大小。您可以根据需要调整这些参数。

我想在行之间交替使用颜色

看到这个类似的问题。从本质上讲，你不能这样做。您可以做的是使用nth-of-type选择器来定位行中的特定项目。

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(20px, auto);
grid-gap: 1rem;
}
.grid__item {
background: pink;
}
/* alternate styling of rows */
.grid__item:nth-of-type(8n + 5),
.grid__item:nth-of-type(8n + 6),
.grid__item:nth-of-type(8n + 7),
.grid__item:nth-of-type(8n + 8) {
background: lightblue;
}

<div class="grid">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item">Grid rows will be at least 20px in height...</div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item">If content takes up more space, the grid item can expand to fit the content.</div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>