最後の行を左揃えにしながら、CSS グリッドをボックスの中央に配置するにはどうすればよいですか?

CSS グリッドを使用したボックスの中央揃えと左揃え

多くのユーザーは、ボックスを中央に揃えながら、最後の行も揃えるという課題に直面しています。左。デフォルトでは、ul 要素はコンテンツに適応しない固定幅を持つことが多く、中央揃えと左揃えの両方を自動的に実現することが困難になります。

CSS グリッド ソリューション

この問題を解決するには、CSS グリッドを使用できます。次の CSS プロパティを実装すると、ボックスを中央揃えにして最後の行を左揃えにすることができます:

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* Width of elements */
  grid-auto-rows: 40px; /* Height of elements */
  grid-gap: 4px;
  justify-content: center; /* Centers boxes */
}

ul li {
  background-color: wheat;
}

HTML コード

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

説明

grid-template-columns プロパティと Grid-auto-rows プロパティは、グリッド内の列と行。 Grid-gap プロパティは要素間の間隔を設定します。中央揃えと左揃えの両方の鍵となるのは、justify-content プロパティです。 「center」に設定すると、親コンテナ内の使用可能なスペースの水平方向の中央にグリッド項目が配置されます。これにより、ボックスが中央に配置され、最後の行がグリッドの端に来るため左に揃えられます。

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