Problemele cu layout-ul de tip placă (grid) folosind Flexbox în CSS

Prima problemă a layout-ului de tip placă este, în general, evidentă imediat - este foarte incomod faptul că părintele trebuie să definească în mod explicit înălțimea. La urma urmei, este posibil să avem o situație în care numărul de blocuri se va schimba dinamic și numărul lor va fi uneori mai mic, uneori mai mare decât 9.

Iar a doua problemă va apărea dacă numărul de blocuri este astfel încât în ultimul rând va fi un număr insuficient de blocuri. În acest caz, ultimul rând va arăta îngrozitor:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Se dovedește că chiar și pe orizontală, valoarea space-between funcționează prost în cazul nostru.

Rezumând: dacă numărul de descendenți ai dvs. este întotdeauna constant și se încadrează normal în părinte, atunci layout-ul de tip placă pe space-between este un lucru suficient de convenabil. În caz contrar, va trebui să găsim o altă soluție.

Sunt date 12 elemente. Realizați din ele un layout de tip placă cu câte 4 elemente pe rând, cu lățimea fiecărui element de 100px și distanța între ele de 20px.

Sunt date 12 elemente. Realizați din ele un layout de tip placă cu câte 3 elemente pe rând, cu lățimea fiecărui element de 150px și distanța între ele de 10px.