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

ボックスを中央揃えにして最後の行を左に揃える方法

問題:

ユーザーコンテナ内のボックスを中央に揃えますが、最後の行は左に揃えたいと考えています。つまり、テキストが最後の行の中央に配置されないようにする必要があります。

関連コード:

div {
  padding: 20px;
  width: 200px;
  background-color: green;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

ul li {
  width: 40px;
  height: 40px;
  background-color: wheat;
  display: inline-block;
}

結果の例:

item1	item2	item3
item4	item5	item6
item7	item8	item9

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

ul li {
  background-color: wheat;
}

結果例:

item1	item2	item3
item4	item5	item6
item7	item8	item9

説明:

• CSS グリッド レイアウトはフレックスボックスやinline-block.
• justify-content: center; ul 要素のプロパティはボックスを親コンテナの中心に揃えます。
• grid-template-columns プロパティは各ボックスの幅を定義します。
• grid-gap プロパティはスペースを制御します
• このソリューションは、手動での調整や調整を必要とせずに、ボックスを自動的に中央に配置し、さまざまな長さの行に対応します。スクリプト。

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