CSS에서 여백이 있는 반응형 타일 레이아웃

이제 여백이 있는 타일 레이아웃을 만들어 봅시다. 다음은 우리가 얻어야 할 결과의 예입니다:

먼저 블록들의 부모 요소에 스타일을 적용합시다:

.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 (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		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: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}

한 개의 블록을 한 행에 배치합니다:

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

모든 코드를 한데 모아 보겠습니다:

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

화면이 줄어들 때 처음에는 한 행에 여덟 개의 요소, 그 다음에는 네 개의 요소, 그 다음에는 두 개의 요소를 가지는 타일 레이아웃을 만드세요. 요소 사이의 간격은 0.75%로 하세요.

이전 작업을 수정하여 요소 사이의 간격이 20px의 고정 값이 되도록 하세요.