Wanderlust Life Jewellery

Women's Jewellery, Meaningful Handmade Designs | Wanderlust LifeWanderlust Life

비 정형 그리드 레이아웃 디자인 | wanderlustlife.co.uk

비 정형 그리드

일반적으로 디자인은 규칙을 정의하는 과정이지만, 이처럼 불규칙적인 레이아웃을 웹 디자인으로 구현해야 하는 상황이 주어집니다. 불규칙한 비 정형 그리드를 CSS Grid로 만드는 첫번째 단계는 행(rows)과 열(columns)의 비율을 측정하여 구현하는 것입니다.

복잡하고 불 규칙적인 그리드 디자인

열 너비 계산

디자인 된 레이아웃을 분석해 열 너비를 계산해야 합니다. 유연하게 반응하는 너비 값이 필요하므로 퍼센트(%) 값을 사용할 경우, 약간의 수학 지식이 요구 됩니다. 각 요소의 시작/끝 위치를 컬럼 그리드 라인으로 그린 후, 비율 계산을 수행합니다. 1번째 열의 너비를 계산하는 방법은 다음과 같습니다.

레이아웃 총 너비 = 1290px 열 너비 = 53px 퍼센트 = 53/1290*100 = 4.06504065%

따라서 왼쪽부터 시작하는 1번째 열 폭은 전체 레이아웃 폭 대비 4.186046512%에 해당합니다. 이 방법을 사용해 나머지 8개 열의 폭을 계산할 수 있습니다. 계산된 값은 grid-template-columns 속성의 값으로 설정합니다.

grid-template-columns:
  4.06504065%
  12.814556717%
  18.81533101%
  13.008130081%
  2.322880372%
  8.439798684%
  8.594657375%
  23.228803717%
  8.713372048%;

퍼센트(%) 대신 분수(fraction) 값을 사용해 너비 비율을 설정할 수도 있습니다.

grid-template-columns: 2fr 6fr 9fr 6fr 2fr 4fr 4fr 11fr 4fr;

행 높이 계산

행에 포함된 요소의 높이에 따라 높이를 변경해야 하고, 요소의 시작/끝 위치에 따라 행을 고정 높이로 설정 하거나, 유연하게 반응하는 행 높이를 설정해야 합니다. 행 높이를 설정하는 것은 열 너비를 계산하는 것보다 쉽습니다. 다행히도 CSS Grid는 유연하게 반응하는 높이 값을 설정할 수 있도록 자동으로 처리하는 auto 값을 지원합니다.

고정 또는 유연하게 반응하는 높이를 가진 행 디자인

디자인 된 레이아웃의 행 높이를 계산하여 고정 또는 유동적으로 변경되는 행 높이를 grid-template-rows 속성 값으로 설정할 수 있습니다.

grid-template-rows: 
  157px /* 고정 */ 
  auto  /* 유동 */
  57px 
  auto 
  73px 
  170px 
  auto;

그리드 정의

그리드를 구성하는 행/열의 계산이 마무리 되었으니 이 값을 토대로 정의 코드를 작성합니다. 열 설정은 퍼센트(%) 또는 분수(fr) 값을 사용, 행 설정은 픽셀(px) 또는 자동(auto) 값을 사용합니다.

.home-section {
  display: grid;
  grid-template-columns: 2fr 6fr 9fr 6fr 2fr 4fr 4fr 11fr 4fr;
  grid-template-rows: 157px auto 57px auto 73px 170px auto;
}

아이템 배치

그리드 행/열을 정의하는 과정을 통해 반응하는 그리드 레이아웃이 만들어졌습니다. 이어서 자식 요소인 각 그리드 아이템 요소들을 적절한 위치에 배치해야 합니다. 디자인 요소(이미지 또는 텍스트)의 위치를 확인한 후, 다음 속성을 사용하여 배치를 설정합니다.

• grid-column-start

• grid-column-end

• grid-row-start

• grid-column-end

또는 속기형 속성을 사용할 수도 있습니다.

• grid-column

• grid-row

왼쪽 상단의 1번째 디자인 요소를 봅시다. 아래 그림과 같이 1열 ~ 5열, 2행에서 시작합니다.

아이템을 배치하는 정확한 코드는 다음과 같습니다.

.featured-grid__item:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 2;
}

속기형을 사용한다면 다음과 같이 코드를 작성할 수 있습니다.

.featured-grid__item:nth-child(1) {
  grid-column: 1 / 5;
  grid-row: 2;
}

grid-column-end 와 grid-row-end 속성은 값이 설정되지 않을 경우, 기본적으로 1개의 행 또는 열에 걸치게 됩니다. 설정하지 않을 경우, 속성의 기본 값은 auto 입니다.

모든 디자인 요소를 그리드에 배치한 코드는 다음과 같습니다.

.home-section {
  display: grid;
  grid-template-columns: 2fr 6fr 9fr 6fr 2fr 4fr 4fr 11fr 4fr;
  grid-template-rows: 157px auto 57px auto 73px 170px auto;
}

.featured-grid__item:nth-child(1) {
  grid-column: 1 / 5;
  grid-row: 2;
}
.featured-grid__item:nth-child(2) {
  grid-column: 7 / 9;
}
.featured-grid__item:nth-child(3) {
  grid-column: 3 / 5;
  grid-row: 4;
}
.featured-grid__item:nth-child(4) {
  grid-column: 8 / 10;
  grid-row: 4;
}
.featured-grid__item:nth-child(5) {
  grid-column: 2 / 4;
  grid-row: 7;
}
.featured-grid__item:nth-child(6) {
  grid-column: 6 / 10;
  grid-row: 6;
}

그리드 가이드

그리드를 머리 속으로만 그려서 위치를 배치하는 것은 쉽지 않습니다. 그렇기에 Chrome 또는 Firefox 브라우저의 개발도구를 사용해 시각적으로 그리드를 확인하며 작업해야 손쉽게 배치를 할 수 있습니다.

Chrome 개발자 도구 Elements 패널에 표시되는 CSS Grid

반응형 뷰

작성된 Grid 코드는 태블릿/데스크탑에 적합한 코드로 모바일에서는 디자인 요소의 너비가 전체 너비를 사용하는 1컬럼 디자인으로 처리해야 합니다. 즉, 모바일 뷰에서는 Grid 코드를 적용할 필요가 없습니다. 미디어 쿼리를 사용해 모바일이 아닌 뷰에서 Grid를 처리할 수 있도록 Grid 코드를 다음과 같이 갈무리 합니다.

@media (min-width: 45em /* 720px */ ) {
  /* Grid 코드 작성 */
}

완성된 결과는 다양한 화면에서 매우 잘 반응하며 동작합니다.

데스크탑 뷰 vs 모바일 뷰

크로스 브라우징 (IE)

IE 10+ 브라우저에서도 레이아웃이 무너지지 않고 올바르게 작동 시키려면 IE에서 적용 가능한 코드(-ms-)가 추가적으로 필요합니다. 다음 코드는 CSS Grid ProjectKit for IE 도구를 사용해 자동으로 생성된 것입니다.

.home-section {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 6fr 9fr 6fr 2fr 4fr 4fr 11fr 4fr;
      grid-template-columns: 2fr 6fr 9fr 6fr 2fr 4fr 4fr 11fr 4fr;
  -ms-grid-rows: 157px auto 57px auto 73px 170px auto;
      grid-template-rows: 157px auto 57px auto 73px 170px auto;
}
​
.featured-grid__item:nth-child(1) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1 / 5;
  -ms-grid-row: 2;
  grid-row: 2;
}
.featured-grid__item:nth-child(2) {
  -ms-grid-column: 7;
  -ms-grid-column-span: 2;
  grid-column: 7 / 9;
}
.featured-grid__item:nth-child(3) {
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-column: 3 / 5;
  -ms-grid-row: 4;
  grid-row: 4;
}
.featured-grid__item:nth-child(4) {
  -ms-grid-column: 8;
  -ms-grid-column-span: 2;
  grid-column: 8 / 10;
  -ms-grid-row: 4;
  grid-row: 4;
}
.featured-grid__item:nth-child(5) {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / 4;
  -ms-grid-row: 7;
  grid-row: 7;
}
.featured-grid__item:nth-child(6) {
  -ms-grid-column: 6;
  -ms-grid-column-span: 4;
  grid-column: 6 / 10;
  -ms-grid-row: 6;
  grid-row: 6;
}