Bagaimanakah Saya Boleh Memusatkan Kotak dengan Baris Terakhir Dijajar Kiri Menggunakan Grid CSS?

Penjajaran Tengah dengan Baris Terakhir Dijajar Kiri

Pertanyaan ini menangani cabaran menjajarkan kotak dalam bekas, berpusat secara mendatar tetapi dengan yang terakhir baris dibenarkan ke kiri. Isu utama ialah elemen ul biasa cenderung padan dengan lebarnya berdasarkan kandungannya, tidak meninggalkan ruang untuk pelarasan manual.

Untuk menyelesaikannya, kami boleh memanfaatkan grid CSS, yang memberikan lebih kawalan ke atas peletakan elemen. Berikut ialah coretan kod CSS dan HTML yang dikemas kini:

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>

Dengan menambahkan justify-content: center; kepada elemen ul, kami mengalihkan kandungan ke arah tengah. Walau bagaimanapun, kami mengekalkan penjajaran kiri untuk baris terakhir, yang merupakan sifat sedia ada grid CSS.

Untuk melaraskan lebar dan ketinggian elemen, ubah suai nilai dalam lajur grid-template dan grid-auto- barisan. Laraskan sifat padding dan lebar div agar sesuai dengan keperluan reka bentuk anda.

Dengan menerima fleksibiliti grid CSS, kami boleh mencapai penjajaran kandungan dinamik tanpa bergantung pada pelarasan manual atau skrip.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Kotak dengan Baris Terakhir Dijajar Kiri Menggunakan Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!