グリッド項目を CSS グリッドの最後の行/列にまたがるようにするにはどうすればよいですか?

グリッド項目は暗黙的グリッドの最後の行/列にまたがることはできますか?

CSS グリッドでは、グリッド項目を次の行/列にまたがらせることができます負の整数を使用した明示的なグリッドの最後の行/列。ただし、この手法は暗黙的グリッドでは機能しません。

暗黙的グリッド

暗黙的グリッドには固定数の行と列がないため、これは不可能です。最後の行/列までのスパンを直接指定します。たとえば、行数が不明な次のグリッドについて考えます。

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

暗黙的なグリッドでの分割

項目を最初から最後まで拡張するには暗黙的なグリッド内の行では、絶対配置を使用できます。この例では、3 番目のボックスを他のボックスの上に配置し、行全体に広がるように下にオフセットします。

.box:nth-child(3) {
  background-color: yellow;
  position: relative;
  top: calc(-100vh + 20px);
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

Explicit Grids

行と列が明示的に定義されている明示的なグリッドでは、負の整数を使用して最後の行/列にまたがることができます。これを以下に示します。

.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}

.item {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
}

この例では、.item 要素はグリッドの 2 番目の列と行全体に広がります。

結論

CSS グリッドは、暗黙的なグリッドの最後の行/列にスパンする直接的な方法を提供しませんが、絶対値を使用してこれを実現できます。ポジショニング。ただし、明示的なグリッドでは、この目的で負の整数を使用できます。

以上がグリッド項目を CSS グリッドの最後の行/列にまたがるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。