Betydningen av auto-fit i CSS-grid

La oss nå se på verdien auto-fit, som også brukes når man spesifiserer kolonner med samme størrelse i sammenheng med funksjonen repeat. Forskjellen fra verdien auto-fill er at auto-fit tilpasser antall kolonner til tilgjengelig bredde på containeren, ved å utvide eller trekke dem sammen.

Eksempel

La oss se på hvordan verdien auto-fit fungerer ved å bruke et eksempel med en container med åtte elementer. La oss bruke sammen med verdien auto-fit den velkjente funksjonen minmax fra forrige leksjon:

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

Eksempel

La oss nå redusere bredden på grid-containeren til 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;
}

Praktiske oppgaver

Anta at du har en tabell med ni elementer. Sett for dem ved hjelp av verdien auto-fit en slik kolonnebredde og bredde på grid-containeren at alle barneelementene plasseres i tre rader.

Modifiser nå den forrige oppgaven slik at alle elementene plasseres i to rader.