CSS グリッドを使用して左揃えの最終行を持つボックスを中央に配置する方法

最後の行が左揃えの中央揃えのボックス

要素の動的リストを扱う場合、最後の行を揃えながら中央揃えのレイアウトを実現するのは難しい場合があります。左側の要素。 text-align: center はコンテナ内で要素を水平に配置しますが、コンテナの幅は考慮されません。

問題の解決

CSS グリッドは、この問題の解決策を提供します。

div {
  display: grid;
  justify-content: center;
}

• display: グリッドはコンテナをグリッドに変換しますlayout.
• justify-content: center グリッドのコンテンツを水平方向に中央揃えします。

ただし、要素の最後の行が左に揃えられるようにするには、 Grid-template-columns を使用したグリッド内の列の数:

ul {
  grid-template-columns: repeat(auto-fit, 40px);
}

• repeat(auto-fit, 40px) は、コンテンツに合わせて必要な数の列を作成し、各列の幅は 40px です。

例:

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

このソリューションでは、リスト内の要素の数に関係なく、ボックスは水平方向の中央に配置され、最後の行は左に配置されます。

以上がCSS グリッドを使用して左揃えの最終行を持つボックスを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。