CSS グリッドの最後の行に項目を均等に配置するにはどうすればよいですか?

CSS グリッド: 最終行の項目を均等に分散する

Web デザインの取り組みでは、グリッド内で項目を均等に分散する必要がよく発生します。レイアウト、特に最終行。このタスクは、nth-child ルールと nth-last-of-type ルールを組み合わせることで簡単に実現できます。ただし、この方法の前提条件は、グリッド内の列の数を知っていることです。

次のマークアップを考慮してください:

<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 ルール:

.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;
}

この例では、グリッドは 3 つの列で定義されており、nth-child と を使用して最後の行内の項目の分布とスタイルを指定します。 n 番目の最後のタイプ。視覚効果を示すために境界線が追加されています。

nth-child(3n-1):nth-last-of-type(1) または nth-child(3n-2) に適用される CSS ルール: nth-last-of-type(1) は、2 列目と 3 列目の最後の項目がそれぞれ 2 列または 3 列にまたがり、行の残りのスペースを美しく消費するようにします。

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