Значэнне auto-fill у CSS грэдах

Для ўстанаўлення памеру аднолькавых слупкоў грэд-кантэйнера вельмі зручна ў функцыі 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. Пазьмяняйце шырыню бацькі і паглядзіце, як мяняецца колькасць калонак.