Pločice sa automatskom širinom blokova u CSS-u

U prethodnoj lekciji, kod naših pločica se dešavalo da zbir širina elemenata i njihovih razmaka mora da bude jednak širini roditelja. To nije baš univerzalno. Hajde da napravimo tako da se elementi automatski prilagode širini roditelja.

Recimo da imamo ovakvog roditelja:

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

Neka elementi ove pločice budu po 4 bloka u redu:

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

Podesimo širinu naših blokova tako da svaki od njih zauzima četvrtinu roditelja. Za ovo postavićemo njihovu veličinu na 25%:

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

Postavite blokovima širinu u procentima tako da u pločici bude tri bloka u redu.

Postavite blokovima širinu u procentima tako da u pločici bude dva bloka u redu.

Postavite blokovima širinu u procentima tako da u pločici bude po jedan blok u redu.