Bagaimanakah Saya Boleh Membuat Grid Petak Responsif Menggunakan Flexbox atau Grid?

Grid Petak Responsif

Memaparkan grid petak yang bertindak balas kepada saiz skrin yang berbeza-beza dan mengandungi kandungan yang dijajarkan secara menegak dan mendatar boleh dicapai dengan beberapa pelaksanaan Flexbox atau Grid.

Flexbox

Menggunakan Flexbox, anda boleh mencipta grid fleksibel seperti:

 paparan: flex;<br> flex-wrap: wrap;<br> justify-content: space-round;<br> align-content: start;<br>}</p><p>.square {<br> flex-grow : 1;<br> lebar maks: 200px;<br> warna latar belakang: #f1f1f1;<br> jidar: 10px;<br> padding: 20px;<br> text-align: center;<br>}</p><p>@media (max-width: 768px) {<br> . segi empat sama {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">max-width: 100px;

Salin selepas log masuk

}
}

 <div class="square">Square 1</div&gt ;<br> <div> <div class="square">Square 3</div><br></div>

Grid

🎜>

Sebagai alternatif, anda boleh menggunakan Reka letak grid untuk lebih kawalan ke atas struktur grid:

 paparan: grid;<br> grid-template- lajur: ulangi(automuat, minmax(200px, 1fr)); // mentakrifkan bilangan lajur<br> jurang: 10px; // mentakrifkan jurang antara item grid<br>}<br></p>.square {<p> background-color: #f1f1f1;<br> text-align: center;<br> padding: 20px;<br>}

 <div class="square">Square 1</div><br> <div> &lt ;div class="square">Square 3</div><br></div>

Kedua-dua Flexbox dan Grid menawarkan kaedah yang berbeza-beza untuk mencipta grid petak responsif. Pilihan antara keduanya bergantung pada keperluan dan pilihan khusus anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Grid Petak Responsif Menggunakan Flexbox atau Grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!