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

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

Patricia Arquette
リリース: 2025-01-01 11:24:10
オリジナル
508 人が閲覧しました

How Can I Make CSS Grid's Last Row Items Fill Remaining Space?

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

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