グリッド項目は暗黙的な CSS グリッドの最後のセルにまたがることはできますか?

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

グリッド レイアウトは、コンテンツを行と列に整理するためによく使用されます。シナリオによっては、グリッド内の行または列の数に関係なく、アイテムが複数の行または列にまたがることが望ましい場合があります。ただし、行と列の数が明示的に定義されていない暗黙的なグリッドを使用する場合、これが課題となる可能性があります。

この例では、コンテナには暗黙的なグリッドに配置された動的な数のボックスが含まれています。タスクは、3 番目のボックスを最初のグリッド線から最後のグリッド線までまたがるようにすることです。単純なグリッド ソリューションで十分であるように思われるかもしれませんが、CSS グリッド レベル 1 仕様では現在そのようなソリューションをサポートしていません。

ただし、絶対配置を使用した回避策が別のリファレンスで提案されています。

明示的なグリッドで問題に対処する

暗黙的グリッドではセルをまたがるのは不可能ですがグリッドの場合、これは明示的なグリッドで実現できます。この場合、行と列の正確な数は、grid-template-rows、grid-template-columns、grid-template-areas などのプロパティを使用して定義されます。

によるとCSS グリッド仕様では、明示的なグリッドの終端からカウントするために負の整数を使用できます。この機能を利用することで、目的の動作を実現できます。

grid-column: 3 / -1;

この構文は、3 番目の列行から最後の列行までのグリッド領域に広がります。同様に、次は最初の列行から 3 番目の列行まで続きます:

grid-column: 1 / -3;

このアプローチは、特定の行数と列数が定義されている明示的なグリッドにのみ適用できることに注意することが重要です。

以上がグリッド項目は暗黙的な CSS グリッドの最後のセルにまたがることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。