ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS グリッドの最後の行に項目を均等に配置するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-12-10 06:14:10
オリジナル
307 人が閲覧しました

How to Equally Distribute Items in the Last Row of a CSS Grid?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート