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

最後の行を左揃えにして中央揃え

このクエリは、コンテナ内のボックスを水平方向に中央揃えにして最後の行と揃えるという課題に対処します。行を左揃えにします。重要な問題は、一般的な UL 要素はコンテンツに基づいて幅を合わせる傾向があり、手動で調整する余地がないことです。

これを解決するには、要素の配置をより詳細に制御できる CSS グリッドを利用できます。更新された CSS と HTML コード スニペットは次のとおりです。

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 here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

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

justify-content: center; を追加することで、 ul 要素に移動すると、コンテンツが中央に向かって移動します。ただし、最後の行については左揃えを維持します。これは CSS グリッドの固有のプロパティです。

要素の幅と高さを調整するには、grid-template-columns および Grid-auto- 内の値を変更します。行。デザイン要件に合わせて div のパディングと幅のプロパティを調整します。

CSS グリッドの柔軟性を活用することで、手動の調整やスクリプトに頼ることなく、動的なコンテンツの配置を実現できます。

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