如何在CSS网格布局中定位特定的列或行？

问题描述 投票：21回答：5

是否可以使用CSS选择特定的网格列或行？

例如，假设我有一个3行乘2列CSS网格布局：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;。如何从第2列中选择所有元素？例如：grid:nth-child(column:2)（只是我的想法，不是有效的代码）。

我在nth-child元素上尝试过div选择器，但这不允许我在Grid Layout引擎自动放置项目时指定行或列。

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.item {
  background: #999;
}
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Right Justify</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
html css css3 css-selectors css-grid
5个回答
11
投票

CSS无法实现。

CSS以HTML元素，属性和属性值为目标。

网格列和行没有这些“钩子”。

您必须直接定位网格项目。

你写了：

例如，假设我有一个3行乘2列CSS网格布局：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;。如何从第2列中选择所有元素？

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 50vh;
  background-color: gray;
}

grid-item {
  background-color: lightgreen;
}

grid-item:nth-child(2n) {
  border: 2px dashed red;
}
<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>
12
投票

要设置任意行的样式，可以使用包装元素，其display设置为contents。请参阅下面的代码段：

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

.grid-item {
  border: 1px solid black;
  padding: 5px;
}

.grid-row-wrapper {
  display: contents;
}

.grid-row-wrapper > .grid-item {
  background: skyblue;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-row-wrapper">
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

编辑：与所有实现一样，您应该检查以确保它在您的目标环境中工作。您可以在MDN或caniuse.com上查看兼容性表以获取对display: contents的支持：

1
投票

如果您想要设置行的样式，则应用相同的主体。以上为例：

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 50vh;
  background-color: gray;
}

grid-item {
  background-color: lightgreen;
}

grid-item:nth-child(4n+3),grid-item:nth-child(4n) {
  border: 2px dashed red;
}
<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>
0
投票

没有可以定位的列或行元素，但如果网格是统一的（每行中的单元格数相同），则可以选择单元格。这里有些例子。

1. Columns.

5列网格中的最后一列：

    .item:nth-child(5n) { /* ... */ }

5列网格中的第四个（最后一个）列：

    .item:nth-child(5n-1) { /* ... */ }

5列网格中的第一个（最后一个）列：

    .item:nth-child(5n-4) { /* ... */ }

2. Rows

5列网格中的第一行（前五个单元格）：

    .item:nth-child(-n+5) { /* ... */ }

5列网格中的第二行（单元格从6到10）：

    .item:nth-child(n+6):nth-child(-n+10) { /* ... */ }

5列网格中的第三行（11到15之间的单元格）：

    .item:nth-child(n+11):nth-child(-n+15) { /* ... */ }

5列网格中的最后一行，包含20个单元格（从16开始的单元格）：

    .item:nth-child(n+16) { /* ... */ }
-1
投票

CSS Grid按设计排除了行的概念，因此您必须明确地将该语义关系添加到标记中。

如果您正在控制列表创建，您可以添加even或odd属性，例如（在JSX生成器中用于说明/简单）：

for (const rowIndex in items) {
  const row = items[rowIndex]
  const parity = {[rowIndex % 2 ? 'odd' : 'even']: ''}
  for (const col in row.columns) {
     yield <div class='col' {...parity}>{col}</div>
  }
}

这将输出如下内容：

<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' odd>...</div>
<div class='col' odd>...</div>
<div class='col' odd>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>

然后在你的CSS中：

.col[even] { ... }
.col[odd] { ... }
-1
投票

你不能。你没有这样的选择器。

但这很奇怪，因为你可以轻松地从qazxsw poi定位行/列

CSS

这是很自然的期待：

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

不要提出草案的原因尚未提出

UPD 似乎有列：div[style*="display:grid"]:grid-row(3) { background-color: blue; } div[style*="display:grid"]:grid-column(3) { background-color: green; }

UPD 在W3C回购的https://drafts.csswg.org/selectors-4/#the-nth-col-pseudo

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.