CSS を使用して特定のグリッド列または行を選択することは可能ですか?
たとえば、3 行 2 列の CSS グリッド レイアウトがあるとします。2grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;
番目の列からすべての要素を選択するにはどうすればよいでしょうか? たとえば、次のようになりますgrid:nth-child(column:2)
(これは私のアイデアであり、有効なコードではありません)。
nth-child
要素にセレクターを試してみましたdiv
が、CSS グリッド レイアウト エンジンによって項目が自動的に配置されるときに行または列を指定することはできません。
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>
ベストアンサー1
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>
すべての実装と同様に、ターゲット環境で動作することを確認する必要があります。互換性表は以下で確認できます。翻訳または使ってもいいですかサポート対象display: contents
:
- 画面(MDN)
- display:contents を使用できますか?(JavaScriptが必要です)ホームページ)