[javascript] CSS responsive grid (flexbox)

참고: https://medium.com/@mignunez/how-to-create-a-responsive-image-grid-gallery-with-html-css-flexbox-1a4ea78f1ab3

이 포스트에서는 반응형 이미지 그리드를 만드는 방법을 알아보겠습니다. 개괄적인 아이디어는 내부에 세 개의 열이 있는 하나의 컨테이너를 만드는 것 입니다. 각 열에는 자체 이미지 세트를 넣습니다. 열 내부의 이미지 정렬은 flexbox로 합니다. 아래서 보다시피 이미지는 마법 처럼 정렬되는 것이 아니라 전략적으로 그렇게 보이도록 만들어진 것 입니다.

TL;DR

모든 코드와 데모는 codepen에서 확인할 수 있습니다.

See the Pen image gallery by shinyks (@shinyks) on CodePen.

HTML

가장 먼저 필요한 것은 모든 코드를 배치할 컨테이너이므로 container 라는 이름으로 클래스를 생성하겠습니다. 그 안에 제목을 넣을 title 이라는 이름의 클래스와 세 개의 열을 가질 photo-gallery 이름의 클래스를 추가합니다.

<div class="container">
  <h2 class="title">Responsive Photo Gallery</h2>
  <div class="photo-gallery">
     // 세 개의 열이 여기 들어갑니다.
  </div>
</div>

다음의 코드와 같이 photo-gallery 클래스 안에 세 개의 열을 추가합니다. 각 열에는 여러 이미지가 포함되어 있으며 각 이미지의 클래스 이름은 photo 이고 이미지 소스에 대한 링크가 포함된 image 태그가 있습니다. 여기서 이미지는 Unsplash API의 임의 이미지 링크를 사용했습니다.

<div class="container">
  <h2 class="title">Responsive Photo Gallery</h2>
  <div class="photo-gallery">
     <div class="column">
       <div class="photo">
          <img src="https://source.unsplash.com/OyCl7Y4y0Bk" alt="">
       </div>
       <div class="photo">
          <img src="https://source.unsplash.com/Kl1gC0ve620" alt="">
       </div>
       <div class="photo">
          <img src="https://source.unsplash.com/55btQzyDiO8" alt="">
       </div>
     </div>
     <div class="column">
       <div class="photo">
          <img src="https://source.unsplash.com/g0dBbrGmMe0" alt="">
       </div>
       <div class="photo">
          <img src="https://source.unsplash.com/v1OW17UcR-Q" alt="">
       </div>
       <div class="photo">
          <img src="https://source.unsplash.com/Wpg3Qm0zaGk" alt="">
       </div>
     </div>
     <div class="column">
       <div class="photo">
          <img src="https://source.unsplash.com/W3FC_bCPw8E" alt="">
       </div>
       <div class="photo">
          <img src="https://source.unsplash.com/rBRZLPVLQg0" alt="">
       </div>
       <div class="photo">
          <img src="https://source.unsplash.com/RRksEVVoU8o" alt="">
       </div>
     </div>
  </div>
</div>

CSS

css 부분은 다음의 코드와 같이 기본 margin과 padding을 제거하기 위해 0으로 설정합니다. 이 부분은 기술적 요구사항이 아니라 개인의 취향인 부분이기 때문에 반드시 필요하지 않습니다.

* {
  margin: 0;
  padding: 0;
}

다음 CSS는 큰 화면에서 잘 보이도록 하는 깔끔한 트릭입니다. 컨테이너의 max-width를 특정 너비로 설정하는 것 입니다. 저는 1224px를 사용했습니다. 즉, 컨테이너는 최대 1224px이 되므로 사용자의 컴퓨터 화면이 더 큰 경우 이미지가 화면에 맞게 늘어나지 않게 됩니다. 사용자의 화면 크기가 1224px보다 작으면 어떻게 될까요? width를 90%로 설정했음을 알 수 있습니다. 즉, 사진 갤러리가 1224px보다 작을 때 화면의 90%를 차지하게 됩니다.

.container {
  max-width: 1224px;
  width: 90%;
  margin: auto;
  padding: 40px 0;
}

title과 photo-gallery 사이에 간격을 추가하겠습니다.

.title {
  margin-bottom: 2rem;
}

위에서 작성했다시피 photo-gallery라는 이름의 클래스가 세 개 있습니다. 현재 커다란 열 하나가 화면을 차지하고 있는데 세 개의 열을 각각 양옆으로 정렬하고 싶습니다. 이를 위해 "display: flex" 라는 flexbox 속성을 사용하면 쉽게 해결할 수 있습니다. gap은 열 사이의 간격을 두는데 사용합니다.

.photo-gallery {
  display: flex;
  gap: 20px;
}

열 내의 이미지에는 현재 구조가 없지만 이미지 사이에 약간의 간격을 두고 서로 위/아래로 쌓이게 만들고 싶습니다. 다시 한번 이는 flexbox 속성인 "display: flex"와 "flex-direction: column"을 활용하여 쉽게 이룰 수 있습니다.

.column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

그리고 이미지 자체에 기본적인 스타일링을 추가합니다.

.photo img {
  width: 100%;
  border-radius: 5px;
  height: 100%;
  object-fit: cover;
}

마지막으로 이미지 갤러리를 반응형으로 만들어 완성하겠습니다. 화면 크기가 768px 보다 작아지면 화면에 하나의 열만 보이도록 정렬 하겠습니다.

@media(max-width: 768px){
  .photo-gallery {
    flex-direction: column;
  }
}