Znaczenie auto-fit w siatkach CSS

Teraz rozważmy wartość auto-fit, która również jest stosowana przy określaniu kolumn o tym samym rozmiarze razem z funkcją repeat. Jej różnica w stosunku do wartości auto-fill polega na tym, że auto-fit dopasowuje liczbę kolumn do dostępnej szerokości kontenera, rozszerzając lub ściskając je.

Przykład

Przyjrzyjmy się działaniu wartości auto-fit na przykładzie kontenera z ośmioma elementami. Zastosujmy razem z wartością auto-fit znaną Ci z poprzedniej lekcji funkcję minmax:

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

Przykład

A teraz zmniejszmy szerokość kontenera siatki do 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;
}

Zadania praktyczne

Załóżmy, że masz tabelę z dziewięcioma elementami. Ustaw dla nich za pomocą wartości auto-fit taką szerokość kolumn i szerokość kontenera siatki, aby wszystkie elementy potomne zmieściły się w trzech rzędach.

A teraz zmodyfikuj poprzednie zadanie tak, aby wszystkie elementy ułożyły się w dwóch rzędach.