갤러리 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;"에서 14px
을 28px
로 바꾸어보겠습니다.
그리드 아이템 사이의 간격이 14px에서 28px로 2배로 늘어났습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!