Gallery Grid

갤러리 그리드 레이아웃
일관되게 반복되는 규칙의 그리드를 정의해 거터를 가지는 6컬럼 갤러리 레이아웃을 구현할 수 있습니다.

열 너비 / 거터 계산
일정한 열 너비 및 간격을 유지하는 갤러리 레이아웃으로 계산이 손쉽습니다. CSS Grid는 분수(fraction)을 사용할 수 있어 보다 간단하게 구현할 수 있습니다.
레이아웃 총 너비 = 1242px 거터 간격 = 30px

갤러리 컨테이너의 너비에서 거터 값 (30px
) 만 뺀 나머지를 일정하게 6등분 하기에 repeat()
함수를 사용해 코드를 작성합니다. 컬럼의 너비는 grid-template-columns
속성을 거터는 grid-column-gap
속성을 사용합니다.
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 30px;
행 높이 / 거터 계산
grid-template-rows
속성을 사용해 행 높이를 계산하여 반복되는 부분은 repeat()
함수를 사용하여 설정합니다. 행 사이 간격은 grid-row-gap
속성을 사용합니다.
grid-template-rows: 108px repeat(3, 288p);
grid-row-gap: 36px;

그리드 정의
계산된 행/열 설정을 토대로 그리드를 정의하는 코드를 다음과 같이 작성합니다.
.chanel-galley {
display: grid;
max-width: 1242px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 108px repeat(3, 288px 36px) 288px;
grid-gap: 36px 30px;
}
Last updated