Dlaždice s automatickou šírkou blokov v CSS

V predchádzajúcej lekcii sa v našej dlaždici stalo, že šírka prvkov a ich medzier musela dokopy dávať šírku rodiča. To nie je veľmi univerzálne. Spravme to tak, aby sa prvky automaticky prispôsobovali šírke rodiča.

Predpokladajme, že máme takého rodiča:

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

Nech prvky tejto dlaždice sú usporiadané po 4 bloky v rade:

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

Nastavme šírku našich blokov tak, aby každý z nich zaberal štvrtinu rodiča. Na to nastavme ich veľkosť na 25%:

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

Nastavte blokom šírku v percentách tak, aby v dlaždici boli tri bloky v rade.

Nastavte blokom šírku v percentách tak, aby v dlaždici boli dva bloky v rade.

Nastavte blokom šírku v percentách tak, aby v dlaždici bol jeden blok v rade.