Bagaimanakah Saya Boleh Jadikan Item Baris Terakhir Grid CSS Mengisi Ruang yang Selebihnya?

Mengawal Jarak Baris Terakhir dalam Grid CSS

Cabaran:

Bagaimana kita boleh memastikan semua item dalam baris terakhir grid CSS menggunakan ruang yang tinggal dalam baris, tanpa mengira mereka nombor?

Penyelesaian:

Memanfaatkan kuasa grid CSS, kami boleh mencapai kawalan spatial ini melalui gabungan pintar anak ke-n dan ke-terakhir-dari- peraturan jenis. Kuncinya terletak pada mengetahui bilangan lajur dalam grid terlebih dahulu.

Pelaksanaan:

1. Tentukan grid menggunakan paparan: grid dan nyatakan bilangan yang dikehendaki lajur dengan lajur-templat-grid.
2. Gunakan item justify: mulakan sifat untuk menjajarkan item dalam baris.
3. Gunakan *:nth-child(3n-1) untuk menggayakan item pertama dalam setiap baris dengan sifat tertentu (cth., memusatkan teks).
4. Gunakan *:nth-child (3n) untuk menggayakan item kedua dalam setiap baris (cth., menjajarkan teks ke kanan).
5. Untuk item terakhir dalam setiap baris, gabungkan *:nth-child(3n-1) dengan nth-last-of-type(1) untuk mencapai gelagat spanning yang diingini.
6. Tambah peraturan tambahan untuk menyesuaikan penampilan baris terakhir, seperti menentukan jidar atau warna latar belakang.

Contoh Kod:

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: start;
  grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

Contoh HTML:

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

Dengan memanfaatkan kuasa sifat CSS ini, kami boleh mengawal jarak item dalam baris terakhir grid CSS, memastikan reka letak yang estetik dan fleksibel.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Jadikan Item Baris Terakhir Grid CSS Mengisi Ruang yang Selebihnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!