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

CSS グリッド レイアウトのターゲット スタイル: 行と列

CSS グリッド レイアウトでは、特定の行または列を選択的にターゲットにすることが重要になります。正確なスタイリング。 n 番目の子セレクターは従来の項目選択に使用できますが、グリッド構造内の要素をターゲットにする場合には不十分です。

行のターゲット

これに対処するには制限があるため、display プロパティを content に設定したラッパー要素の使用を検討してください。この手法を使用すると、ラッパーの子がグリッドのトラック内に配置されているにもかかわらず、スタイルをラッパーの子に特別に割り当てることができます。

たとえば、以下のコード スニペットは、特定の行を青色で強調表示する方法を示しています。

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

この例では、ラッパー要素「.grid-row-wrapper」の表示プロパティがcontentsに設定されており、その直接の子である「.grid-item」がその青を継承できるようにしています。

列をターゲットにする

上記の手法は行には効果的ですが、CSS グリッド レイアウトには、特定の列を直接ターゲットにする同等のメカニズムがありません。ただし、フォールバック ソリューションでは、justify-self プロパティまたは align-self プロパティを使用してグリッド内の要素の位置を調整する必要があるため、特定の列をターゲットにしているかのような錯覚を引き起こす可能性があります。

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