CSS Grid'lerde auto-fit bahasynyň manygy

Indi bolsa, birmeňzeş ölçegli sütünleri kesgitlemek üçin repeat funksiýasy bilen bilelikde ulanylyan auto-fit bahasyna seredeliň. Onuň auto-fill bahasyndan tapawudy şonda, auto-fit sütünleriň sanyny konteýneriň elýeterli inişine laýyklaşdyrýar, olary giňeldýär ýa-da daraldýar.

Mysal

Geliň, sekiz elementli konteýner mysalynda auto-fit bahasynyň işini göreliň. auto-fit bahasy bilen bilelikde, öňki sapakdan tanys bolan minmax funksiýasyny ulanyň:

<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-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mysal

Indi bolsa grid konteýneriň inişini 400px çenli azaldalyň:

<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-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Amaly wezipeler

Dokuz elementli tablicyňyz bar diýeliň. auto-fit bahasyny ulanyp, sütünleriň inişini we grid konteýneriň inişini şeýle kesgitleň, şol ýagdaýda ähli çagalar elementi üç hatara ýerleşsin.

Indi bolsa, öňki wezipäni üýtgediň, şol ýagdaýda ähli elementler iki hatara ýerleşsin.