Maksud auto-fill dalam Grid CSS
Untuk menetapkan saiz lajur grid-container yang sama
sangat mudah untuk menggunakan fungsi repeat dengan
nilai auto-fill, yang mana
container kita akan dipenuhi dengan lajur yang sama
dengan lebar yang kita kehendaki.
Mari buat jadual daripada lapan elemen dan
tetapkan lebar setiap lajur kepada 200px.
Pada masa yang sama, biarkan nilai auto-fill
secara automatik mengira bilangan lajur yang diperlukan:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Tetapkan lebar lajur kepada 200px.
Cuba ubah lebar elemen parent dan
lihat bagaimana bilangan
lajur berubah.
