課題:
最後の行のすべての項目を確実に配置するにはどうすればよいですかCSS グリッドの行は、その行に関係なく、行の残りのスペースを消費します。
解決策:
CSS グリッドの機能を活用すると、nth-child と nth-last-of- の賢い組み合わせによってこの空間制御を実現できます。タイプのルール。重要なのは、グリッド内の列の数を事前に知っておくことです。
実装:
例コード:
.grid { display: grid; grid-template-columns: auto auto auto; justify-items: start; grid-gap: 10px; } .grid div { border: 1px solid #ccc; width: 100%; } .grid > *:nth-child(3n-1) { justify-self: center; text-align: center; } .grid > *:nth-child(3n) { justify-self: end; text-align: right; } .grid > *:nth-child(3n-1):nth-last-of-type(1) { border-color: red; grid-column: span 2; } .grid > *:nth-child(3n-2):nth-last-of-type(1) { border-color: red; grid-column: span 3; }
HTML 例:
<div class="grid"> <div>text</div> <div>TEXT</div> <div>text</div> <div>text</div> <div>TEXT</div> <div>text</div> <div>text</div> <div>TEXT</div> </div>
これらの CSS プロパティの力を利用することで、アイテムの間隔を効果的に制御できます。 CSS グリッドの最後の行。美しく柔軟なレイアウトを確保します。
以上がCSS グリッドの最後の行項目を残りのスペースに埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。