Bagaimana untuk Memusatkan Grid Kotak Semasa Menjajarkan Kiri Baris Terakhir?

Cara Memusatkan Kotak tetapi Menjajarkan Baris Terakhir ke Kiri

Masalah:

Seorang pengguna mahu menjajarkan kotak dalam bekas ke tengah, tetapi pastikan baris terakhir dijajarkan ke kiri. Dalam erti kata lain, mereka mahu menghalang teks daripada dipusatkan pada baris terakhir.

Kod Berkaitan:

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

Contoh Keputusan:

item1	item2	item3
item4	item5	item6
item7	item8	item9

Penyelesaian menggunakan CSS Grid:

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

Contoh Keputusan:

item1	item2	item3
item4	item5	item6
item7	item8	item9

Penjelasan:

• The Reka letak Grid CSS digunakan bukannya flexbox atau inline-block.
• The justify-content: pusat; sifat elemen ul menjajarkan kotak ke tengah bekas induk.
• Sifat grid-template-lajur mentakrifkan lebar setiap kotak.
• Sifat jurang grid mengawal ruang antara kotak.
• Penyelesaian ini secara automatik menjajarkan kotak di tengah dan memuatkan barisan yang berbeza-beza panjang tanpa memerlukan pelarasan manual atau skrip.

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