본문으로 건너뛰기

그리드로 갤러리 만들기

갤러리 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>


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

이제 "grid-template-columns: repeat(2, 1fr);"에서 repeat(2, 1fr)repeat(4, 1fr)로 바꾸어 볼까요?



"repeat(4, 1fr)"로 변경했더니, 열(세로줄)의 갯수가 2개에서 4개로 늘어났어요!

다음으로 "grid-auto-rows: minmax(280px, auto);"에서 minmax(280px, auto)minmax(140px, auto)로 바꾸어 볼까요?



그리드 아이템의 높이가 280px의 절반인 140px로 줄어들었습니다.

마지막으로 "grid-gap: 14px;"에서 14px28px로 바꾸어보겠습니다.



그리드 아이템 사이의 간격이 14px에서 28px로 2배로 늘어났습니다.