Responsiv CSS-gitter uden marginer

Lad os lave et gitter, som vil have et varierende antal blokke pr. række afhængigt af skærmbredden. Her er et eksempel på, hvad vi skal opnå:

Lad os først skrive HTML-koden:

<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>

Lad os nu tilføje styling til forælderen til blokkene:

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

Lad os nu style selve blokkene, uden at angive deres bredde:

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

Det er indlysende, at blokkenes bredde skal være i procent, så blokkene jævnt ændrer deres bredde, når skærmen ændres. På bestemte skærmstørrelser skal vi ændre blokkenes bredde så et bestemt antal af disse blokke passer på en række.

Lad os skrive koden, der placerer fire blokke på en række:

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

Og nu tre blokke på en række:

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

Og nu to blokke på en række:

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

En blok på en række:

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

Lad os samle al koden:

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

Omdan min kode, så blokkenes bredde beregnes via funktionen calc.

Lav et gitter, hvor der først er fire elementer på en række, så to elementer på en række, og derefter et element på en række, når skærmen bliver mindre.

Lav et gitter, hvor der først er seks elementer på en række, så tre elementer på en række, og derefter et element på en række, når skærmen bliver mindre.