CSS グリッド レイアウトで特定の行と列をターゲットにするにはどうすればよいですか?

CSS グリッド レイアウトの行と列をターゲットにする

CSS グリッド レイアウトをデザインするときは、特定の行または列をターゲットにする方法を知ることが重要ですグリッド内。これにより、レイアウトのさまざまな領域の正確なスタイル設定とカスタマイズが可能になります。

ターゲット行

CSS グリッド内の特定の行のスタイルを設定するには、:nth- child() セレクターとグリッド行擬似クラスを組み合わせたもの。たとえば、3 行グリッドを含む提供されたコード スニペットでは、次の CSS ルールを使用して 2 行目を選択できます:

これにより、2 行目のすべての要素の背景色が に設定されます。 skyblue.

列をターゲットにする

特定の列をターゲットにする場合も、同様のアプローチに従います。 :nth-child() セレクターは、grid-column 疑似クラスで使用できます。たとえば、2 列のグリッド レイアウトで 2 番目の列を選択するには、次のようにします:

これにより、2 番目の列のすべての要素に黄色の背景が適用されます。

行ターゲットと列ターゲットの組み合わせ

グリッド内の特定のセルをターゲットにするには、グリッド行と列ターゲットを組み合わせることができます。同じセレクター内のグリッド列疑似クラス。たとえば、2 行目と 1 列目の要素を選択するには:

これにより、その特定のセルの要素に赤い境界線が表示されます。

行をターゲットにする代替案および Columns

場合によっては、n 番目の子セレクターが望ましい結果を提供しないことがあります。別の方法として、grid-row-start プロパティとgrid-row-end プロパティ、またはgrid-column-start プロパティとgrid-column-end プロパティを使用して、要素の行または列の位置を設定することもできます。たとえば、:nth-child() を使用せずに 2 行目をターゲットにするには、次のように使用できます:

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