it-swarm.com.ru

Как настроить таргетинг на конкретный столбец или строку в CSS Grid Layout?

Можно ли выбрать конкретный столбец или строку сетки с помощью CSS?

Например, скажем, у меня есть CSS-макет CSS 3 строки на 2 столбца: _grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;_. Как выбрать все элементы из второго столбца? Например: 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>_
30
Diode Dan

Не возможно с CSS.

CSS предназначается для элементов HTML, атрибутов и значений атрибутов.

Столбцы и строки сетки не имеют ни одного из этих "крючков".

Вы должны будете нацеливаться на элементы сетки напрямую.

Вы писали:

Например, скажем, у меня есть макет CSS Grid Layer 3 на 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>
15
Michael_B

Чтобы стилизовать произвольную строку, вы можете использовать элемент-оболочку с его 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:

17
chipit24

Если вы когда-нибудь захотите стилизовать строку, применяется тот же принцип. Взяв этот пример сверху:

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>
2
Domenik Reitzner

Нет элементов столбца или строки, на которые вы можете ориентироваться, но если сетка однородна (одинаковое количество ячеек в каждой строке), вы можете выбрать ячейки. Вот несколько примеров.

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) { /* ... */ }
1
Mateusz