Betekenis van auto-fit in CSS-roosters

Laat ons nou die waarde auto-fit oorweeg, wat ook toegepas word wanneer gelyke grootte kolomme gespesifiseer word saam met die repeat-funksie. Die verskil daarvan met die waarde auto-fill is dat auto-fit die aantal kolomme aanpas by die beskikbare breedte van die houer deur hulle uit te brei of saam te trek.

Voorbeeld

Kom ons kyk na die werking van die waarde auto-fit aan die hand van 'n voorbeeld van 'n houer met agt elemente. Laat ons dit toepas saam met die waarde auto-fit en die funksie minmax wat jy ken uit die vorige les:

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

Voorbeeld

Laat ons nou die breedte van die roosterhouer verminder na 400px:

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

Praktiese take

Gestel jy het 'n tabel met nege elemente. Stel vir hulle, met behulp van die waarde auto-fit, so 'n kolombreedte en roosterhouerbreedte in dat alle kindelemente in drie rye geplaas word.

Pas nou die vorige taak so aan dat alle elemente in twee rye geplaas word.