ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS グリッドを使用してボックスを水平方向に中央揃えし、最後の行を左に揃えるにはどうすればよいですか?

CSS グリッドを使用してボックスを水平方向に中央揃えし、最後の行を左に揃えるにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-12-22 20:39:06327ブラウズ

How to Center Boxes Horizontally and Align the Last Row to the Left with CSS Grid?

CSS グリッドを使用して中央揃えのボックスの最後の行を左に揃えます

Q: ボックスを水平方向に中央揃えにして最後の行を左に揃えるにはどうすればよいですか? left?

A: CSS グリッド プロパティを使用すると、手動で調整したり、

これを実現するには、次の CSS プロパティを変更します。

div {
  /* Add resize property for dynamic width adjustment */
  resize: horizontal;
  /* Add justify-content property to center the boxes horizontally */
  justify-content: center;
}

ul {
  display: grid;
  /* Define the number of columns based on the number of boxes */
  grid-template-columns: repeat(auto-fit, 40px);
  /* Define the height of the boxes */
  grid-auto-rows: 40px;
  /* Add grid-gap property for spacing between boxes */
  grid-gap: 4px;
}

justify-content: center を指定すると、ボックスがコンテナ内で水平方向の中央に配置されます。 display:grid プロパティは、グリッド システムで指定されているように、ボックスの最後の行を左に揃えます。

resize:horizo​​ntal プロパティでは、コンテナの幅を動的に調整できます。幅が変更されると、ボックスは中央揃えを維持しながら、利用可能なスペースに収まるように自動的に再配置されます。

以上がCSS グリッドを使用してボックスを水平方向に中央揃えし、最後の行を左に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。