我有无限数量的div元素（内容/网格项目）。我希望它们按定义的 CSS 网格列数进行布局。CSS Grid 可以轻松地将它们布置成这样。但是现在随着元素就位，我想以<div>某种方式在结果网格的每隔一行中设置 s 的样式。

可以将其视为将每隔一行的表格样式设置为较深的颜色。

这个问题可以概括为：你可以为 CSS Grid 的任意行/列设置样式吗？

建议情况：

<div class="content-grid">
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    ...

</div>

它的CSS：

.content-grid {
    display: grid;
    grid-template-columns: 77px 77px 77px;
}

.content-grid__item {
    background-color: red;
}

以及理想世界中的首选解决方案：

// pseudocode
.content-grid:nth-row(odd) .content-grid__item {
    background-color: darkred;
}

我正在尝试使用CSS网格创建一个表,基于内容使用相等的列.我想避免使用<table>.这是此问题的后续问题:使用CSS网格自动调整列

我想要实现的目标:

此表有效:https://codepen.io/anon/pen/baExYw

但是我想把每一行包裹起来div,这不足为奇地打破了桌子.

该表格已破:https://codepen.io/anon/pen/qpbMgG

app.html

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

app.css

.wrapper …

使用grid-template-columns: repeat(auto-fit, minmax(600px, 1fr))可以轻松构建响应式CSS网格.容器将填充尽可能多的元素,而不使用媒体查询.

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.item {
  height: 100px;
  background: #ccc;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

问题是当屏幕小于指定的最小值时,项目比屏幕宽minmax().您可以通过添加媒体查询来解决此问题400px,但这仅在您知道容器周围没有内容时才有效.当容器可以放在任何地方时,这几乎是不可能的.

有没有办法或财产告诉这些项目他们永远不应该超过100%？

类似的东西:用尽可能多的400px物品填充容器,但要确保它们的宽度不超过容器宽度的100%.

CodePen演示

使用 CSSdisplay: grid而不是 html 标签是个好习惯<table>吗？

很多时候<table>在响应式设计中很难使用。特别是对于复杂的购物篮表和处理 colspan 等。但是使用 css-grid 很容易。

我在样式行（如<tr>表格）中看到了一些问题。有 nth-child 东西的方法。你怎么看待这件事？

在下面的示例中,我希望将所有项目都设置为最大内容的宽度(例如,项目5).

• 列表中的项目数是动态的,可能有数百个.

• 每个项目内容的宽度也是动态的.

• 每行中的项目数量将根据容器的宽度而变化.

期望的输出

注意: 媒体查询不适用于我的方案.

使用CSS FLEX

Flex被认为是一维的.这意味着它可以在单个轴(行)上实现所需的结果,除非内容小于可用空间.

非包装示例(单行)

.container {
  display: flex;
}

.item {
  background: #58c;
  text-align: center;
  white-space: nowrap;
  margin: 0 10px 10px 0;
  flex: 1;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5 is longer</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Flex的flex-wrap属性可用于创建二维布局.再次这很好用,但需要一个固定的宽度值才能计算每个项目的宽度.

包装示例(多行)

.container {
  display: flex;
  flex-wrap:wrap;
}

.item {
  background: #58c; …

我正在构建一个 CSS 网格布局，不知何故我无法获得“自动”值来调整行高的大小。

项目保持最小高度为 1fr，即使它们的内容小到足以让它们缩小。

这是一个解释问题的代码示例 - 您也可以在https://codepen.io/16kbit/pen/RJbMWM上查看

section {
  display: grid;
  grid-template-areas: "one top" "one bottom";
  align-items: start;
  border: 1px solid hotpink;
}

article {
  border: 1px solid green;
}

#one {
  grid-area: one;
}

#top {
  grid-area: top;
}

#bottom {
  grid-area: bottom;
  background: yellow;
}

<section>
  <article id=one>
    <h1>One</h1>
    <p>Lorem cool dolizzle sit amizzle, dope sizzle elizzle. Nullam shiznit velizzle, get down get down volutpizzle, suscipizzle quizzle, dizzle mammasay mammasa mamma oo sa, arcu. Pellentesque …

我正在尝试使用 CSS Grid 规范创建一个 3 列布局，但我遇到了行和元素大小的问题。我的列需要包含不同高度的未指定数量的内容。

这是我理想的布局：

问题：

1）如果我告诉元素 A 和 B 使用第 1 行、第 1 列，那么它们会相互叠加，而不是 B 在 A 下方。

2)如果我指定元素 B 使用第二行，那么由于元素 C 使第 1 行变高，它会被推到元素 C 下方。

3)如果我指定元素 B 使用第二行，则元素 A 会拉伸以填充第 1 行。

有没有办法让元素表现得像第一张图片？

我所知道的唯一解决方案是在列内创建“脚手架”div，如下所示：

<div class="grid">
    <div class="col">
        <div class="itemA"></div>
        <div class="itemB"></div>
    </div>
    <div class="col">
        <div class="itemC"></div>
    </div>
    <div class="col">
        <div class="itemD"></div>
        <div class="itemE"></div>
        <div class="itemF"></div>
    </div>
</div>

但我不喜欢这样做，我认为网格规范应该允许在没有脚手架的情况下创建布局。

问题：

1）有什么办法可以防止元素拉伸以垂直填充行？

2)是否可以将两个元素放在同一行上，并让它们一个在另一个下面而不是冲突？

这是我的 2 支笔，我试图在其中找到有脚手架和没有脚手架的解决方案：

无脚手架

带脚手架

假设我有一个 3 列的 CSS 网格。有没有一种方法，使用JavaScript，以获得grid-row和grid-column自动放置元素？

例子：

console.log($('#test').css('grid-row'), $('#test').css('grid-column'));
// expected output: 2 3 
// actual output: two empty strings

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

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="test"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是示例的 JSFiddle：https ://jsfiddle.net/w4u87d2f/7/

在这个例子中，我可以通过计算元素并知道网格有三列来计算：

grid-column = $('#test').index() % 3 + 1;
grid-row = Math.ceil( $('#test').index() / 3 )

但这仅适用于非常简单的网格，也意味着我必须考虑更改列数的断点。

编辑：这不是Retrieve the position (X,Y) of an HTML element的副本，因为我对像素坐标不感兴趣，但对 CSS-Grid 中的行号和列号不感兴趣。

我来自一个沉重的 div/float 背景来构建响应式站点（例如 Bootstrap 3、Foundation）并简要使用 Flex box，但一直尝试在任何地方使用 Grid，因为它在解决许多问题方面非常出色。我似乎经常遇到这样的“简单”问题，并且觉得我缺少一些基础知识，并且在文档中找不到答案。无论如何，到代码。

给定一个像这样的网格设置：

display: grid;
grid-auto-columns: max-content;
grid-auto-flow: column;

一旦内容填充了其父元素的宽度，内容就不会换行到新行。理想情况下，我可以让它自动换行，而无需预先定义精确的像素测量值，例如grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));. 这似乎不能满足我的需求——我必须grid-template-columns为不同的视口定义多个测量值，并知道列内项目的合适宽度是多少。我更愿意说grid-auto-columns: max-content;然后让项目简单地换行。

这可能与网格吗？我错过了什么/误解了什么？

请参阅 Codepen 的完整示例来演示该问题：https ://codepen.io/csdv/pen/OrbrzJ

有一个包含许多小行和列的网格，如下所示：

项目将被放置在其中，例如：

网格是用类似的东西创建的：

grid-template-rows: repeat(auto-fill, 10px);
grid-template-columns: repeat(auto-fill, 10px);

• 网格的宽度可以和浏览器窗口一样宽，比如 2000 像素。
• 高度可以是多个屏幕，比如 10000 像素。
• 轨道对用户不可见，上图仅用于演示 CSS 网格布局的外观。
• 可能有数百个“项目”（上图中的灰色区域），每个项目占据一定数量的单元格（可以是 1x1 项目，也可以是 60x40 项目）

问题

• 这是性能问题吗？浏览器生成几百列几千行的网格是否昂贵？
• 如果是，有没有办法优化repeat(auto-fill, 10px)？也许应该使用百分比来代替 ( repeat(auto-fill, 1%))，或者用什么来代替auto-fill?

或者最好通过 JavaScript 执行此操作（高度到容器，左/上到项目）？