Pllaka Adaptiv me Hapësira në CSS

Tani le të bëjmë një pllakë me hapësira. Ja një shembull i asaj që duhet të arrijmë:

Së pari le të bëjmë stilet për prindin e blloqeve:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Tani le t'u caktojmë stile vetë blloqeve, pa u caktuar gjerësi, por duke u caktuar margjinin e poshtëm në përqindje:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

Tani le të shkruajmë kodin që do të vendosë katër blloqe në një rresht, duke caktuar hapësirat përkatëse:

@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Dhe tani le të vendosim tre blloqe në një rresht:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}

Dhe tani le të vendosim dy blloqe në një rresht:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}

Një bllok në një rresht:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Le të mbledhim të gjithë kodin së bashku:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Bëni një pllakë që kur ekrani zvogëlohet të ketë fillimisht tetë elemente në një rresht, pastaj katër elemente në një rresht, pastaj dy elemente në një rresht. Le të jetë hapësira midis elementeve 0.75%.

Modifikoni detyrën e mëparshme në mënyrë që hapësira midis elementeve të jetë një vlerë e fiksuar prej 20px.