Sel Segi Empat Susun Atur Grid CSS
<p>Saya mahu mencipta paparan seperti papan pemuka menggunakan CSS Grid-Layout sebagai asas. Saya mahu 16 lajur tersebar di seluruh panjang skrin (harus responsif). Ketinggian sel kemudiannya harus ditentukan oleh lebar sel untuk menjadikan sel itu segi empat sama. Masalahnya, saya mahu beberapa sel merentangi berbilang sel. Sebagai contoh, saya mahukan elemen yang mengambil sel 2x1. </p>
<p>Jadi saya mempunyai reka letak grid asas: </p>
<pre class="brush:php;toolbar:false;">.grid-container {
paparan: grid;
grid-template-columns: repeat(16, 1fr);
grid-auto-rows: var(--tile-unit);
gap: var(--jubin-jurang);
align-content: mulakan;
}
.grid-item {
latar belakang: kelabu muda;
jejari sempadan: 10px;
}</pre>
<p>Terdapat juga kelas untuk elemen yang merangkumi berbilang lajur atau baris: </p>
<pre class="brush:php;toolbar:false;">.width-unit-2 {
grid-lajur-hujung: span 2;
}
.height-unit-2 {
grid-row-end: span 2;
}</pre>
<p>Sekarang saya cuba menggunakan nisbah aspek elemen. Ini berfungsi dengan baik untuk elemen 2x1, tetapi jika saya mahukan elemen 2x2, saya tidak boleh mentakrifkan nisbah bidang dalam kelas yang sepadan, saya perlu menentukan kelas berasingan untuk kes ini. </p>
<p>Adakah terdapat cara untuk menjadikan sel grid segi empat sama tanpa menggunakan <kod>nisbah aspek</kod>? </p>
