Bagaimana untuk Pusatkan Kotak Secara Mendatar dan Jajarkan Baris Terakhir ke Kiri dengan Grid CSS?

Jajarkan Baris Terakhir Kotak Berpusat ke Kiri Menggunakan Grid CSS

S: Bagaimanakah saya boleh memusatkan kotak secara mendatar tetapi menjajarkan baris terakhir ke kiri?

J: Menggunakan sifat grid CSS, adalah mungkin untuk mencapai senario penjajaran ini tanpa manual pelarasan atau skrip.

Untuk mencapai ini, ubah suai sifat CSS berikut:

div {
  /* Add resize property for dynamic width adjustment */
  resize: horizontal;
  /* Add justify-content property to center the boxes horizontally */
  justify-content: center;
}

ul {
  display: grid;
  /* Define the number of columns based on the number of boxes */
  grid-template-columns: repeat(auto-fit, 40px);
  /* Define the height of the boxes */
  grid-auto-rows: 40px;
  /* Add grid-gap property for spacing between boxes */
  grid-gap: 4px;
}

Dengan menentukan justify-content: center, kotak akan dipusatkan secara mendatar dalam bekas. Paparan: sifat grid akan menjajarkan baris terakhir kotak ke kiri, seperti yang dinyatakan dalam sistem grid.

Saiz semula: sifat mendatar membenarkan pelarasan dinamik lebar bekas. Apabila lebar berubah, kotak akan disusun semula secara automatik untuk dimuatkan dalam ruang yang tersedia sambil mengekalkan penjajaran tengahnya.

Atas ialah kandungan terperinci Bagaimana untuk Pusatkan Kotak Secara Mendatar dan Jajarkan Baris Terakhir ke Kiri dengan Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!