CSS Grid'деги auto-fill мааниси

Grid-контейнердин бирдей колонкаларынын көлөмүн белгилөө үчүн repeat функциясында auto-fill маанисин көрсөтүү абдан ыңгайлуу, ал сиздин контейнериңизди бизге керекттуу тууралыктагы бирдей колонкалар менен толтурат.

Келгиле, сегиз элементтен турган таблица жасап, ар бир колонкага бирдей 200px тууралык берели. Андан тышкары, auto-fill мааниси өзү керектүү колонкалардын санын эсептеп чыгарсын:

<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;
}

Колонканын тууралыгын 200px кылып белгилеңиз. Ата-эне элементтин тууралыгын өзгөртүп, колонкалардын саны кантип өзгөрөрүн көрүңүз.