Responsiv rutenett med mellomrom i CSS

La oss nå lage et rutenett med mellomrom. Her er et eksempel på hva vi skal oppnå:

La oss først lage stilene 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 bredde, men med bunnmargin i prosent:

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

La oss nå skrive koden som plasserer fire blokker på rad, med tilhørende mellomrom:

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

La oss nå plassere tre blokker på rad:

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

La oss nå plassere to blokker på rad:

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

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

Lag et rutenett som når skjermen blir mindre først har åtte elementer på rad, deretter fire elementer på rad, og deretter to elementer på rad. La avstanden mellom elementene være 0.75%.

Modifiser forrige oppgave slik at avstanden mellom elementene er en fast verdi på 20px.