갤러리 Grid 만들기

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

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개를 넣어보겠습니다.

HTML 갤러리 그리드
<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>

"gallery" 클래스에서 설정한 것처럼, grid-template-columns: repeat(2, 1fr);에서 2개의 열(세로줄)을 만들고, 각 행(가로줄) 속 이미지의 최소 높이는 280px로 설정되어 있습니다.

이제 "grid-template-columns: repeat(2, 1fr);"에서 repeat(2, 1fr)를 repeat(4, 1fr)로 바꾸어 보면, 열(세로줄)의 갯수가 2개에서 4개로 늘어납니다!

다음으로 "grid-auto-rows: minmax(280px, auto);"에서 minmax(280px, auto)를 minmax(140px, auto)로 바꾸면, 그리드 아이템의 높이가 280px의 절반인 140px로 줄어듭니다.

마지막으로 "grid-gap: 14px;"에서 14px을 28px로 바뀌는 것을 확인할 수 있습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!