CSS グリッドの最後の行項目が利用可能なスペースを均等に埋めるにはどうすればよいですか?

グリッドの最後の行の項目をスペースを埋めるように強制する

番号に関係なく、CSS グリッドの最後の行に項目を均等に配置するには

課題は、レイアウトを操作するためのグリッド内の項目の数を決定することにあります。これは事前には分からない可能性があるため、CSS は nth-child セレクターと nth-last-of-type セレクターを使用した解決策を提供します。その仕組みは次のとおりです。

1. 最後の行項目を識別する: nth-last-of-type を使用して最後の行項目を選択します。たとえば、グリッド > *:nth-last-of-type(1) は、最後の行のすべての項目をターゲットにします。
2. 左端の項目を配置: 左端の項目を中央に配置するには、justify-self: center を使用します。 。 2 番目の項目については、justify-self: end を使用して右揃えにします。これらのスタイルは、3 つおきのアイテムに適用できます (例: グリッド > *:nth-child(3n-1) およびグリッド > *:nth-child(3n-2))。
3. 最後の項目の範囲を調整: 行の最後の項目については、残りのスペース全体にまたがるようにします。これを実現するには、グリッド内の列の数に応じて、grid-column:span 2 またはgrid-column:span 3を使用します(たとえば、3列のグリッドの場合は、grid > *:nth-child(3n) -1):nth-last-of-type(1) { グリッド列: スパン 2; }).

これらを組み合わせることでこのテクニックを使用すると、グリッドの最後の行にあるすべての項目が、その数に関係なく、利用可能なスペースを均等に消費するようにすることができます。

以上がCSS グリッドの最後の行項目が利用可能なスペースを均等に埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。