web-dev-qa-db-ja.com

CSSグリッドレイアウトで特定の列または行をターゲットにする方法は？

CSSで特定のグリッド列または行を選択することは可能ですか？

たとえば、3行2列のCSSグリッドレイアウトgrid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;があるとします。 2列目からすべての要素を選択するにはどうすればよいですか？例：grid:nth-child(column:2)（私の考えであり、有効なコードではありません）。

div要素でnth-childセレクターを試しましたが、グリッドレイアウトエンジンによってアイテムが自動的に配置されるときに行または列を指定することはできません。

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>
htmlcsscss3css-selectorscss-grid
30
Diode Dan

CSSでは不可能です。

CSSは、HTML要素、属性、および属性値を対象としています。

グリッドの列と行には、これらの「フック」はありません。

グリッドアイテムを直接ターゲットにする必要があります。

あなたが書いた：

たとえば、3行2列のCSSグリッドレイアウトgrid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;があるとします。 2列目からすべての要素を選択するにはどうすればよいですか？

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>

EDIT：すべての実装と同様に、ターゲット環境で機能することを確認する必要があります。 display: contentsのサポートについては、MDNまたはcaniuse.comの互換性テーブルを確認できます。

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

5列グリッドの4番目（最後から2番目）の列：

    .item:nth-child(5n-1) { /* ... */ }

5列グリッドの最初（最後から5番目）の列：

    .item:nth-child(5n-4) { /* ... */ }

2.行

5列のグリッドの最初の行（最初の5つのセル）：

    .item:nth-child(-n+5) { /* ... */ }

5列グリッドの2行目（6〜10のセル）：

    .item:nth-child(n+6):nth-child(-n+10) { /* ... */ }

5列グリッドの3行目（11〜15のセル）：

    .item:nth-child(n+11):nth-child(-n+15) { /* ... */ }

20セル（16以降のセル）を持つ5列のグリッドの最後の行：

    .item:nth-child(n+16) { /* ... */ }
1
Mateusz