Responsiv rutenett uten marg i CSS

La oss lage et rutenett som vil ha varierende antall blokker per rad avhengig av skjermbredden. Her er et eksempel på hva vi bør oppnå:

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

La oss nå legge til stiler for foreldreelementet til blokkene:

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

La oss nå sette stiler for selve blokkene, uten å angi bredden deres:

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

Det er åpenbart at bredden på blokkene bør være i prosent, slik at blokkene jamt endrer bredden sin når skjermen endres. Samtidig, ved bestemte skjermpunkter, må vi endre bredden på blokkene slik at et bestemt antall av disse blokkene passer på rad.

La oss skrive koden som vil plassere fire blokker på rad:

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

Og nå skal vi plassere tre blokker på rad:

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

Og nå skal vi plassere to blokker på rad:

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

En blokk på rad:

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

La oss sette sammen all 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%;
	}
}

Omgiør koden min slik at bredden på blokkene beregnes via funksjonen calc.

Lag et rutenett som når skjermen reduseres først vil ha fire elementer på rad, deretter to elementer på rad, og deretter ett element på rad.

Lag et rutenett som når skjermen reduseres først vil ha seks elementer på rad, deretter tre elementer på rad, og deretter ett element på rad.