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选择器来连续定位特定项目。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

CSS网格布局动态行

1 个答案: