# Wanderlust Life Jewellery

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDR92x50Zh9em3UREc%2F-LHDUo4yB-OHxEbj4taV%2Fimage.png?alt=media\&token=a499cd2c-7359-472f-bf3c-906821719cce)

{% embed url="https://wanderlustlife.co.uk/" %}
비 정형 그리드 레이아웃 디자인 | wanderlustlife.co.uk
{% endembed %}

## 비 정형 그리드 <a href="#asymmetrical-grid" id="asymmetrical-grid"></a>

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

![복잡하고 불 규칙적인 그리드 디자인](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDR92x50Zh9em3UREc%2F-LHDUBiL4dB9gFljQKRS%2Fimage.png?alt=media\&token=7d4d9ad4-72fd-475a-ab1d-1946f2409268)

### 열 너비 계산 <a href="#calc-columns" id="calc-columns"></a>

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

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

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

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

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

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

### 행 높이 계산 <a href="#calc-rows" id="calc-rows"></a>

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

![고정 또는 유연하게 반응하는 높이를 가진 행 디자인](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDZVnWHZ9eHQJZ7sPa%2F-LHDiUMJZgX9PnL2qRcg%2Fimage.png?alt=media\&token=c5ba0c2d-72a3-4d83-8e78-baae12bd1d53)

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

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

### 그리드 정의 <a href="#define-grid" id="define-grid"></a>

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

```css
.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;
}
```

### 아이템 배치 <a href="#placement-items" id="placement-items"></a>

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

* `grid-column-start`
* `grid-column-end`
* `grid-row-start`
* `grid-column-end`

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

* `grid-column`
* `grid-row`

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDwknkOFGlVC270HUN%2F-LHDxu6jjm9XEwj_tY9r%2Fimage.png?alt=media\&token=8e111818-d8d8-4d85-a4ed-05a7262fa9fe)

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

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

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

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

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDZVnWHZ9eHQJZ7sPa%2F-LHDwTqar_2uG7UZ-dTL%2Fimage.png?alt=media\&token=a88b0741-66ad-4c29-a22a-d02680645c17)

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

```css
.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;
}
```

### 그리드 가이드 <a href="#grid-guide" id="grid-guide"></a>

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

![Chrome 개발자 도구 Elements 패널에 표시되는 CSS Grid](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDZVnWHZ9eHQJZ7sPa%2F-LHDtBHkwNqkoT0W-v_N%2Fimage.png?alt=media\&token=0faf7d1b-82e3-403f-b507-87c464bc0a51)

### 반응형 뷰 <a href="#responsive-view" id="responsive-view"></a>

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

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

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

![데스크탑 뷰  vs  모바일 뷰](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDwknkOFGlVC270HUN%2F-LHE1cF1T5ZuhGBQ0xsH%2F1_e1BtfBWBSVmF-gfIf7j_gw.gif?alt=media\&token=720e6624-ba17-4888-9158-1fc19daa07ab)

### 크로스 브라우징 (IE)

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

```css
.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;
}
```
