CSS网格布局动态行 [英] CSS Grid Layout Dynamic Rows

问题描述

我想知道是否有一种方法可以在没有Javascript的情况下为网格布局分配动态的行数和列数？我所看到的每个示例还都包含一些Javascript，到目前为止，我只对HTML和CSS（一名学生）有所了解。我想要达到的目的是，当我添加内容时，我不想在CSS中创建新行。我也不知道是否可行，但是如果我可以只重复两行作为基本布局，那太好了，我希望在行之间交替显示颜色，而无需使用其他属性来放置其他内容。

I was wondering if there is a way to assign a dynamic number of rows and columns to a Grid layout without Javascript? Every example I've seen has also included some Javascript and as of now I'm working on a bare knowledge of only HTML and CSS (a student). What I am trying to achieve is that as I add content, I don't want to have to create new rows in my CSS. I don't know if it's possible either, but it'd be nice if I could repeat just two rows as a basic layout, I want alternating colors between my rows and no other properties than to use them to place other content.

编辑：

好吧，我试图用

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

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

The problem with going about it this way is I have to manually add a new grid item for every row or column I want. I found a partial solution in repeat.

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

但是我不确定这是否意味着我会继续滚动当我用完所有空白区域时，我将不得不更改我的CSS，这是我所期望的，或者是否只需要返回手动添加新的网格项。我试图找到一种方法来指定我的CSS文件，使行数未知，以便在添加内容时不必手动添加网格项。

But I'm unsure if this will mean that I will be left with scrolling white areas when I run out of rows and I will have to change my CSS, which I expect, or whether I will just have to go back to adding manually new grid-items. I am trying to find a way to specify to my CSS file, make an unknown number of rows so that as I add content, I don't have to manually add grid-items.

推荐答案

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

What I am trying to achieve is that as I add content, I don't want to have to create new rows in my CSS.

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

I think what you're describing can be done using grid-auto-rows.

来自MDN：

如果网格项目为如果将其定位到未按grid-template-rows显式确定
大小的行中，则会创建隐式网格轨迹来保存它。
这可以通过明确地定位到超出范围的
行或通过自动放置算法创建其他
行来实现。

If a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows.

网格自动行可以设置隐式行轨道的大小。

Grid-auto-rows lets you set the size of implicit row tracks.

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

In the example below I have a basic four-column grid. Grid rows are being created implicitly, and are sized to be at least 20px, and at most, auto, or the maximum size of the content. You can adjust these parameters as you need.

我要在行之间交替显示颜色

I want alternating colors between my rows

请参阅此类似问题。本质上，您不能这样做。您可以做的是使用 nth-of-type 选择器来连续定位特定项目。

See this similar question. Essentially, you can't do this. What you can do is use the nth-of-type selector to target specific items in a row.

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

这篇关于CSS网格布局动态行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！