갤러리 Grid 만들기

CSS 탭을 열고 아래와 같은 클래스를 정의해 보겠습니다.

.gallery {
  display: grid;
  max-width: 1000px;
  margin: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(280px, auto);
  grid-gap: 14px;
}

이 코드는 "gallery"라는 CSS 클래스를 다음과 같이 정의해요.

display: grid;: "gallery" 클래스를 가진 요소를 그리드 형태로 배치gody
max-width: 1000px;: 그리드의 최대 너비를 1000픽셀로 제한해요.
margin: auto;: 그리드를 화면의 가운데로 정렬해요.
grid-template-columns: repeat(2, 1fr);: 그리드 컨테이너를 2개의 열(세로줄)로 반복하여 생성하고, 각 열의 너비를 동일하게 설정해요.
grid-auto-rows: minmax(280px, auto);: 그리드 컨테이너 내에서 추가 행(가로줄)의 높이를 설정해요. "minmax(280px, auto)"의 의미는 행의 높이가 최소 280px, 최대 자동으로(auto) 늘어나게 설정한다는 뜻이에요. 즉 아무리 그리드 아이템의 높이가 작라도 최소 280px의 높이를 확보하고, 그리드 아이템의 높이가 280px이 넘어가면 자동으로 알아서 늘어나요.
grid-gap: 14px;: 그리드 아이템 사이의 간격을 14px로 설정해요.

아래와 같이 그리드 컨테이너에 이미지 4개를 넣어보겠습니다.

<div class="gallery">
  <img
    src="https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg"
    width="100%"
    height="100%"
    alt="아이템1"
  />

  <img
    src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg"
    width="100%"
    height="100%"
    alt="아이템2"
  />

  <img
    src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg"
    width="100%"
    height="100%"
    alt="아이템3"
  />

  <img
    src="https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg"
    width="100%"
    height="100%"
    alt="아이템4"
  />
</div>