CSS网格布局动态行

Question

我想知道是否有一种方法可以在没有Javascript的情况下为Grid布局分配动态数量的行和列？我见过的每个例子都包含了一些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，或内容的最大大小。您可以根据需要调整这些参数。

我想在我的行之间交替颜色

看到这个similar question。从本质上讲，你不能这样做。你可以做的是使用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>