정사각형 이미지 갤러리 만들기 (feat. flex)

TL;DR

• 플렉스 아이템의 너비를 플렉스 컨테이너의 너비에서 n 분할한 값으로 지정한다

• 플렉스 아이템의 너비가 고정되었으므로 이미지 컨테이너는 너비를 100% 사용하고 비율(aspect-ratio)을 1:1로 지정한다

설명

• Q. 모든 플렉스 아이템의 너비를 어떻게 동일하게 만들지? (ex. 3분할)
• 플렉스 아이템의 너비를 부모 너비의 1/3로 나눈다 ⇒ width: calc(100% / 3)

• Q. 모든 플렉스 아이템에 10px 간격(gutter)를 만들려면 어떻게 하지?
• 플렉스 아이템에 margin을 10px을 추가한다 ⇒ margin: 10px
• 플렉스 아이템의 너비를 부모 너비의 1/3로 나눈 값에 아이템 3개에 대한 마진(3 * 10px)을 뺀다 ⇒ width: calc(100% / 3 - 30px)

• Q. 이미지의 크기는 제각각이다. 어떻게 동일한 크기로 만들지?
• 이미지를 감싸는 div 컨테이너를 마크업에 추가한다
• 플렉스 아이템의 너비가 이미 부모 너비의 3분할로 나뉘었으므로 이미지 컨테이너는 전체 너비를 사용한다 ⇒ width: 100%
• 이미지 컨테이너의 비율을 1:1로 지정한다 ⇒ aspect-ratio: 1 / 1;

결과물

마크업

<ul class="container">
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/2300/300" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/200/3200" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/600/200" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/200/300?1" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/230/300?2" alt="" />
    </div>
  </li>
  <li class="item">
    <div class="image-container">
      <img class="image" src="https://picsum.photos/200/300?3" alt="" />
    </div>
  </li>
</ul>

CSS

* {
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
}

.item {
  width: calc(100% / 3 - 30px);
  margin: 10px;
}

.item:nth-child(1) {
  width: calc(66% - 30px);
}

.image-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid red;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

See also

• codepen