Как настроить таргетинг на конкретный столбец или строку в макете сетки CSS?
Можно ли выбрать конкретный столбец или строку сетки с помощью 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>
Ответы
Ответ 1
Невозможно с CSS.
CSS задает HTML-элементы, атрибуты и значения атрибутов.
Столбцы и строки сетки не имеют ни одного из этих "крючков".
Вам нужно настроить таргетинг на элементы сетки напрямую.
Вы писали:
Например, скажем, у меня есть таблица с тремя строками по 2 столбцам: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. Как выбрать все элементы из второго столбца?
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>
Ответ 2
Чтобы стилизовать произвольную строку, вы можете использовать элемент-обертку, для которого для 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>
Ответ 3
Если вы хотите создать стиль, то применяется тот же самый принцип.
Принимая этот пример сверху:
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>
Ответ 4
Нет элементов столбца или строки, на которые вы можете ориентироваться, но если сетка однородна (одинаковое количество ячеек в каждой строке), вы можете выбрать ячейки. Вот несколько примеров.
1. Колонны.
Последний столбец в сетке из 5 столбцов:
.item:nth-child(5n) { /* ... */ }
Четвертый (2-й последний) столбец в сетке из 5 столбцов:
.item:nth-child(5n-1) { /* ... */ }
Первый (5-й последний) столбец в сетке из 5 столбцов:
.item:nth-child(5n-4) { /* ... */ }
2. Ряды
Первый ряд в сетке из 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) { /* ... */ }
Ответ 5
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] { ... }
Ответ 6
Ты не можешь. У вас нет таких селекторов.
Но это странно, потому что вы можете легко настроить таргетинг строки/столбца из CSS
#item3 {
background-color: blue;
grid-row: span 2 / 7;
}
Это естественно ожидать чего-то:
div[style*="display:grid"]:grid-row(3) {
background-color: blue;
}
div[style*="display:grid"]:grid-column(3) {
background-color: green;
}
Не указывайте причины, по которым проект для этого еще не предложен
UPD
Кажется, есть для столбцов: https://drafts.csswg.org/selectors-4/#the-nth-col-pseudo
UPD
Выпуск на репо W3C
