Adakah terdapat cara untuk memaksa semua item dalam baris terakhir grid mengisi baris itu, tidak kira berapa banyak item yang ada?
Saya tidak tahu bilangan item dalam grid, jadi saya tidak boleh meletakkannya secara langsung. Saya cuba menggunakangrid-auto-flow:ensembletetapi ia tidak membantu.
Ini adalah visualisasi masalah saya: :
div { margin:20px auto; width: 400px; background: #d8d8d8; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); } span { height: 50px; background: blue; }
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini boleh dilakukan sepenuhnya dengan CSS Grid dengan menggabungkan peraturan CSS nth-child dan nth-last-of type. Satu-satunya perkara yang perlu diperhatikan ialah bilangan lajur perlu diketahui terlebih dahulu.
.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; }