Bagaimanakah CSS Grid Center Boxes Semasa Menjajarkan Kiri Baris Terakhir?

Memusatkan dan Menjajarkan Kotak dengan Grid CSS

Ramai pengguna telah menghadapi cabaran dalam menjajarkan kotak secara berpusat sambil juga menjajarkan baris terakhir mereka ke kiri. Secara lalai, elemen ul selalunya mempunyai lebar tetap yang tidak menyesuaikan diri dengan kandungannya, menjadikannya sukar untuk mencapai penjajaran tengah dan kiri secara automatik.

Penyelesaian Grid CSS

Untuk menyelesaikan isu ini, grid CSS boleh digunakan. Dengan melaksanakan sifat CSS berikut, anda boleh memusatkan kotak sambil menjajarkan kiri baris terakhirnya:

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;
}

Kod HTML

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

Penjelasan

Sifat grid-template-lajur dan grid-auto-baris mentakrifkan bilangan lajur dan baris dalam grid. Sifat jurang grid menetapkan jarak antara elemen. Kunci kepada kedua-dua pemusatan dan penjajaran kiri ialah sifat justify-content. Apabila ditetapkan kepada "tengah", ia meletakkan item grid di tengah mendatar ruang tersedianya dalam bekas induk. Ini memastikan kotak berada di tengah, dengan baris terakhir dijajarkan ke kiri semasa ia datang di hujung grid.

Atas ialah kandungan terperinci Bagaimanakah CSS Grid Center Boxes Semasa Menjajarkan Kiri Baris Terakhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!