Таргетинг на определенный столбец в макете столбца CSS

Question

В макете столбца CSS мне нужно нацелить первый столбец и его дочерние элементы.

С помощью следующего кода CSS:

.multi-column {
    @media (min-width: 768px) {
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        column-count: 2;
        column-gap: 10px;

        > li {
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
            overflow: hidden;
        }
    }
}

• Как установить другой background-color для первого столбца?
• Как установить другой color для предметов в последнем столбце?

Мне, наверное, нужно что-то вроде :first-column или что-то подобное псевдо-селектор...

Answer 1

Смысл состоит в том, чтобы добавить дополнительные обертки, которые затем становятся элементами сетки, чтобы создавать группы или столбцы и иметь возможность нацеливать их, используя соответствующие селекторы:

Основной пример:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid;
  /* other grid props which you'd normally have for the container */
}

.grid-item:first-child {background: blue} /* or: ":nth-child(1)", ":first-of-type", ":nth-of-type(1)" */
.grid-item:last-child {color: blue} /* ":nth-child(...)", ":nth-of-type(...)" */

<div class="grid-container">
  <div class="grid-item">
    <div>1.1</div>
    <div>1.2</div>
    <div>1.3</div>
  </div>
  <div class="grid-item">
    <div>2.1</div>
    <div>2.2</div>
    <div>2.3</div>
  </div>
  <div class="grid-item">
    <div>3.1</div>
    <div>3.2</div>
    <div>3.3</div>
  </div>
</div>

Конечно, вы могли бы избежать этого и сделать это с помощью множества селекторов, но это не совсем оптимально, другого пути нет. :first-column или что-то подобное возникнет когда-нибудь...

Другой способ, если вариант использования подходит, будет объединять grid-template-rows с grid-auto-flow: column и более конкретные селекторы:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}

.grid-item {
  display: grid; /* make them grid-items as well and then position their items, if any */
}

.grid-item:nth-child(-n + 3) {background: blue} /* selects first three */
.grid-item:nth-child(n + 7) {color: blue} /* selects all but the first 6 */

<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-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Или просто grid-template-columns и горизонтальный поток по умолчанию:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid; /* make them grid-items as well and then position their items, if any */
}

.grid-item:nth-child(3n + 1) {background: blue} /* selects every third starting from the first  */
.grid-item:nth-child(3n + 3) {color: blue} /* selects every third */

<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-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>