暗黙的な CSS グリッド内のすべての行/列にまたがるグリッド項目を作成するにはどうすればよいですか?

暗黙的なグリッドでグリッド項目を最後の行/列にまたがるようにする

問題: グリッド項目を最初から最後までまたがる方法暗黙的なグリッド内の行または列。行/列の数は不明?

背景:

暗黙的グリッドは、その中のコンテンツに基づいて自動的に生成される複数のトラックを持つグリッドです。明示的なグリッド定義がないと、存在する行/列の数を判断するのが難しくなります。

現在の制限事項:

残念ながら、現在の CSS グリッド仕様では、これは制限されていません。グリッド プロパティを使用して、暗黙的なグリッド内のすべての行/列にわたってグリッド項目をまたがることが可能

代替案:

• 絶対配置: 別の回答で提案されているように、絶対配置を使用すると位置とサイズを定義できます。グリッドのレイアウトに関係なく要素の。ただし、このアプローチはグリッドベースのアプローチから逸脱しています。

明示的なグリッドのソリューション:

暗黙的なグリッドでは項目のスパニングを実現できませんが、可能です。 明示的にそれを達成するにはGrids.

負の整数について:

CSS グリッド仕様では、グリッド配置プロパティで負の整数を使用できます。正の整数は先頭からカウントされ、負の整数は末尾からカウントされます。

グリッド項目の分割:

グリッド項目を最初の列から最後の列まで拡張するには明示的なグリッドの場合は、次を使用します。

grid-column: 1 / -1;

これは、グリッド項目が最初の列行から開始する必要があることを示します。最後の列行で終了します。同じ概念が複数の行にも適用されます。

注:

このメソッドは、グリッドがグリッド テンプレート プロパティ (行、列、および行) を使用して明示的に定義されている場合にのみ機能します。エリア)。

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