Плочица са аутоматском ширином блокова у CSS

У претходној лекцији у нашој плочици се дешавало да ширина елемената и њихових одстојака у збиру мора да да ширину родитеља. То је мање-више неприлагодљиво. Хајде да направимо да се елементи аутоматски прилагођавају ширини родитеља.

Рецимо да имамо оваквог родитеља:

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

Нека елементи ове плочице стоје по 4 блока у реду:

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

Поставимо ширину наших блокова тако да сваки од њих заузима четвртину родитеља. За то поставимо њихову величину на 25%:

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

Поставите блоковима ширину у процентима тако да у плочици буде три блока у реду.

Поставите блоковима ширину у процентима тако да у плочици буде два блока у реду.

Поставите блоковима ширину у процентима тако да у плочици буде по један блок у реду.