Responsive Kacheln ohne Abstände in CSS

Lassen Sie uns Kacheln erstellen, die eine unterschiedliche Anzahl von Blöcken pro Reihe haben, abhängig von der Bildschirmbreite. Hier ist ein Beispiel, wie unser Ergebnis aussehen sollte:

Schreiben wir zuerst den HTML-Code:

<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 class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Fügen wir nun dem Eltern-Element der Blöcke Stile hinzu:

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

Weisen wir nun den Blöcken selbst Stile zu, ohne deren Breite zu definieren:

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

Offensichtlich sollte die Breite der Blöcke in Prozent angegeben werden, damit sich die Blöcke beim Ändern der Bildschirmgröße fließend anpassen. Gleichzeitig müssen wir an bestimmten Breakpoints die Breite der Blöcke ändern, damit eine bestimmte Anzahl dieser Blöcke in eine Reihe passt.

Schreiben wir Code, der vier Blöcke in eine Reihe setzt:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Setzen wir nun drei Blöcke in eine Reihe:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

Setzen wir nun zwei Blöcke in eine Reihe:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

Ein Block pro Reihe:

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

Fassen wir nun den gesamten Code zusammen:

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

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Modifizieren Sie meinen Code so, dass die Breite der Blöcke über die Funktion calc berechnet wird.

Erstellen Sie Kacheln, die bei Verkleinerung des Bildschirms zuerst vier Elemente pro Reihe, dann zwei Elemente pro Reihe und dann ein Element pro Reihe anzeigen.

Erstellen Sie Kacheln, die bei Verkleinerung des Bildschirms zuerst sechs Elemente pro Reihe, dann drei Elemente pro Reihe und dann ein Element pro Reihe anzeigen.