Можно ли выбрать конкретный столбец или строку сетки с помощью CSS?
Например, скажем, у меня есть таблица с тремя строками по 2 столбцам: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;
. Как выбрать все элементы из второго столбца? Например: grid:nth-child(column:2)
(только моя идея, недействительный код).
Я пробовал селектор nth-child
в элементах div
, но это не позволяет мне указывать строку или столбец, когда элементы автоматически помещаются механизмом компоновки сетки.
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>