Bagaimana untuk Memusatkan Kotak dengan Baris Terakhir Dijajar Kiri Menggunakan Grid CSS?

Kotak Berpusat dengan Baris Terakhir Dijajar Kiri

Apabila berurusan dengan senarai elemen dinamik, sukar untuk mencapai reka letak berpusat sambil menjajarkan baris terakhir juga elemen ke kiri. Walaupun penjajaran teks: tengah menjajarkan elemen secara mendatar dalam bekasnya, ia tidak mengambil kira lebar bekas.

Menyelesaikan Isu

Grid CSS menyediakan penyelesaian kepada masalah ini:

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

• paparan: grid menukar bekas menjadi grid susun atur.
• justify-content: tengah mendatar memusatkan kandungan grid.

Walau bagaimanapun, untuk memastikan baris terakhir elemen sejajar ke kiri, kita perlu menentukan bilangan lajur dalam grid menggunakan grid-template-columns:

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

• repeat(auto-fit, 40px) mencipta seberapa banyak lajur yang perlu untuk muat kandungan, setiap satu dengan lebar 40px.

Contoh:

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

Dengan ini penyelesaian, kotak kekal di tengah mendatar manakala baris terakhir dijajar ke kiri, tanpa mengira bilangan elemen dalam senarai.

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