CSS グリッドの最後の行項目を残りのスペースに埋めるにはどうすればよいですか?

CSS グリッドの最後の行の間隔を制御する

課題:

最後の行のすべての項目を確実に配置するにはどうすればよいですかCSS グリッドの行は、その行に関係なく、行の残りのスペースを消費します。

解決策:

CSS グリッドの機能を活用すると、nth-child と nth-last-of- の賢い組み合わせによってこの空間制御を実現できます。タイプのルール。重要なのは、グリッド内の列の数を事前に知っておくことです。

実装:

1. display:grid を使用してグリッドを定義し、必要な列数を指定します。
2. justify-items: start プロパティを適用して、グリッド内の項目を整列させます。 rows.
3. *:nth-child(3n-1) を使用して、各行の最初の項目を特定のプロパティでスタイル設定します (テキストを中央揃えにするなど)。
4. *:nth-child を使用します(3n) 各行の 2 番目の項目のスタイルを設定します (テキストを右揃えにするなど)。
5. 各行の最後の項目については、結合します。 *:nth-child(3n-1) と nth-last-of-type(1) を組み合わせて、目的のスパニング動作を実現します。
6. 境界線の指定など、最後の行の外観をカスタマイズするルールを追加します。または背景色。

例コード:

.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 サイトの他の関連記事を参照してください。