Responsive Kacheln mit Abständen in CSS

Lassen Sie uns nun Kacheln mit Abständen erstellen. Hier ist ein Beispiel, wie das Ergebnis aussehen sollte:

Zuerst erstellen wir die Styles für das Elternelement der Blöcke:

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

Jetzt weisen wir den Blöcken selbst Styles zu, ohne ihnen eine Breite zuzuweisen, aber mit einem unteren Margin in Prozent:

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

Nun schreiben wir den Code, der vier Blöcke in eine Reihe setzt, mit entsprechenden Abständen:

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

Und jetzt setzen wir drei Blöcke in eine Reihe:

@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%;
	}
}

Und jetzt zwei Blöcke in eine Reihe:

@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%;
	}
}

Ein Block in einer Reihe:

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

Lassen Sie uns den gesamten Code zusammenfassen:

.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%;
	}
}

Erstellen Sie eine Kachelansicht, die bei Verkleinerung des Bildschirms zuerst acht Elemente in einer Reihe hat, dann vier Elemente in einer Reihe, dann zwei Elemente in einer Reihe. Der Abstand zwischen den Elementen soll 0.75% betragen.

Modifizieren Sie die vorherige Aufgabe so, dass der Abstand zwischen den Elementen einen festen Wert von 20px beträgt.