Maana ya auto-fit katika Gridi za CSS

Sasa hebu tuchunguze thamani auto-fit, ambayo pia hutumika wakati wa kubainisha safu wima zenye ukubwa sawa pamoja na kitendo repeat. Tofauti yake na thamani auto-fill ni kwamba, auto-fit inalinganisha idadi ya safu wima na upana unaopatikana wa chombo, kupanua au kuizorota.

Mfano

Hebu tuchunguze utendakazi wa thamani auto-fit kwa kutumia mfano wa chombo chenye vitu nane. Tutatumia pamoja na thamani auto-fit kitendo minmax unachokijua kutoka somo lilopita:

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

Mfano

Na sasa hebu tupunguze upana wa chombo cha gridi hadi 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;
}

Kazi za Vitendo

Hebu fanya kuwa una jedwali lenye vitu tisa. Weka kwao kwa kutumia thamani auto-fit upana wa safu wima na upana wa chombo cha gridi ili vitu vyote vya ndani vitapatikana katika safu tatu.

Na sasa badilisha kazi iliyotangulia ili vitu vyote viwe kwenye safu mbili.