Kafelki z automatyczną szerokością bloków w CSS

W poprzedniej lekcji w naszych kafelkach otrzymaliśmy tak, że szerokość elementów i ich odstępów w sumie musiała dawać szerokość rodzica. To jest trochę nieuniwersalne. Zróbmy tak, aby elementy automatycznie dostosowywały się do szerokości rodzica.

Załóżmy, że mamy takiego rodzica:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Załóżmy, że elementy tych kafelek stoją po 4 bloki w rzędzie:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

Ustawmy szerokość naszych bloków tak, aby każdy z nich zajmował ćwiartkę rodzica. W tym celu ustawmy ich rozmiar na 25%:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Ustaw blokom szerokość w procentach tak, aby w kafelkach było trzy bloki w rzędzie.

Ustaw blokom szerokość w procentach tak, aby w kafelkach były dwa bloki w rzędzie.

Ustaw blokom szerokość w procentach tak, aby w kafelkach był po jednym bloku w rzędzie.