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

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

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

我已经在 div元素上尝试了 nth-child选择器，但是这不允许我在项目由 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>

84544 次浏览
小开
最佳答案

Not possible with CSS.

CSS targets HTML elements, attributes and attribute values.

Grid columns and rows have none of these "hooks".

You'll have to target the grid items directly.

You wrote:

For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. How would I select all elements from the 2nd column?

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>

小开

If you ever want to style a row the same principle applies. Taking that example from above:

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>

小开

To style an arbitrary row, you could use a wrapper element with its display set to contents. See the code snippet below:

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

EDIT: As with all implementations, you should check to ensure it works in your target environment(s). You can check the compatibility table on MDN or caniuse.com for support for display: contents:

小开

You can not. You have no such selectors.

But that is strange, because you can easily target row/colum from CSS

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

This is natural to expect something:

div[style*="display:grid"]:grid-row(3) {
background-color: blue;
}


div[style*="display:grid"]:grid-column(3) {
background-color: green;
}

Do not the reasons that draft for this is not proposed yet

UPD
Seems there are for columns: https://drafts.csswg.org/selectors-4/#the-nth-col-pseudo

UPD
Issue at W3C repo

小开

There are no column or row elements that you can target but if the grid is uniform (same number of cells in each row) you can select cells. Here are some examples.

1. Columns

Last column in a 5-column grid:

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

Fourth (2nd last) column in a 5-column grid:

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

First (5th last) column in a 5-column grid:

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

2. Rows

First row in a 5-column grid (first five cells):

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

Second row in a 5-column grid (cells from 6 to 10):

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

Third row in a 5-column grid (cells from 11 to 15):

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

Last row in a 5-column grid with 20 cells (cells from 16 onward):

.item:nth-child(n+16) { /* ... */ }
小开

In the near future we will be able to do it thanks to the Grid-Structural Selectors

The double-association of a cell in a 2D grid (to its row and column) cannot be represented by parentage in a hierarchical markup language. Only one of those associations can be represented hierarchically: the other must be explicitly or implicitly defined in the document language semantics. In both HTML and DocBook, two of the most common hierarchical markup languages, the markup is row-primary (that is, the row associations are represented hierarchically); the columns must be implied. To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined. In a column-primary format, these pseudo-classes match against row associations instead.

The one you need here is :nth-col() that behave the same way as :nth-child()

The :nth-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns before it ref


提交答案