CSS グリッド内の特定の行と列を選択的にスタイル設定するにはどうすればよいですか?

CSS グリッド内の特定の列または行をターゲットにする

CSS グリッド レイアウトでは、grid-template-rows と Grid-template-columnsプロパティはそれぞれ行数と列数を定義します。ただし、グリッドの特定の部分をスタイルする必要がある場合があります。

ターゲット行

任意の行をスタイルするには、表示設定を次のように設定したラッパー要素を使用できます。コンテンツ。これにより、複数のセルが含まれている場合でも、行全体を 1 つのエンティティとしてスタイル設定できます。

たとえば、次のコードを考えてみましょう。

.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>

この例では、 .grid-row-wrapper クラスは、グリッド項目の 2 行目を含むラッパー要素に適用されます。これらの項目の背景色は、.grid-row-wrapper > を使用してスカイブルーに設定されます。 .grid-item selector.

列のターゲット

特定の列をターゲットにするのは少し複雑です。 CSS グリッドには列を直接選択する方法はありませんが、他のプロパティを組み合わせて使用​​すると、目的の効果を実現できます。

1 つの方法は、それぞれが独自のグリッド テンプレートを持つ複数のグリッド コンテナーを使用することです。これにより、各列のレイアウトを個別に制御できるようになります。

もう 1 つのアプローチは、nth-child() セレクターを使用してグリッド内の特定のセルをターゲットにすることです。ただし、特にグリッドが動的に変化する場合、これを維持するのは難しい場合があります。

特定の列または行を定期的にターゲットにする必要がある場合は、多くの場合、追加のセレクターと機能を提供するプリプロセッサまたはライブラリを使用する方が良いでしょう。 CSS グリッド。

以上がCSS グリッド内の特定の行と列を選択的にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。