是否可以使用 CSS 选择特定的网格列或行？
例如，假设我有一个 3 行 x 2 列的 CSS 网格布局：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;。我如何从第二列中选择所有元素？例如：grid:nth-child(column:2)（只是我的想法，不是有效的代码）。
我努力了nth-child选择器上的div元素，但是当 CSS 网格布局引擎自动放置项目时，这不允许我指定行或列。
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>
要设置任意行的样式，您可以使用包装元素及其display set to 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 https://en.wikipedia.org/wiki/MDN_Web_Docs or 我可以用吗 https://caniuse.com/#info_about为支持display: contents:
-
display https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility (MDN)
-
我可以使用显示：内容吗 https://caniuse.com/#search=display%3A%20contents（需要 JavaScriptcaniuse.com)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
