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

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

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

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

이제 블록들 자체에 스타일을 지정하겠습니다. 너비는 지정하지 않고 하단 여백을 백분율로 설정합니다:

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

이제 네 개의 블록을 한 행에 배치하고 해당 여백을 설정하는 코드를 작성하겠습니다:

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

이제 세 개의 블록을 한 행에 배치하겠습니다:

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

이제 두 개의 블록을 한 행에 배치하겠습니다:

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

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

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

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

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