CSS에서 자동 너비 블록을 사용한 타일 레이아웃

이전 강의에서 우리가 만든 타일 레이아웃에서는 요소의 너비와 간격의 합이 부모 요소의 너비와 정확히 일치해야 했습니다. 이 방법은 다소 범용적이지 않습니다. 이제 요소들이 부모 요소의 너비에 자동으로 맞춰지도록 만들어 보겠습니다.

다음과 같은 부모 요소가 있다고 가정해 봅시다:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

이 타일 레이아웃의 요소들이 한 줄에 4개의 블록으로 배치된다고 해보겠습니다:

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

각 블록이 부모 요소 너비의 4분의 1을 차지하도록 블록 너비를 설정해 보겠습니다. 이를 위해 크기를 25%로 설정합니다:

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}