Gallery Grid

https://www.chanel.com/us/fashion/knitwear/l/1x3x13/the-lookswww.chanel.com

갤러리 레이아웃 디자인 | CHANEL

갤러리 그리드 레이아웃

일관되게 반복되는 규칙의 그리드를 정의해 거터를 가지는 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;
}