# Wanderlust Life Jewellery
{% embed url="" %}
비 정형 그리드 레이아웃 디자인 | wanderlustlife.co.uk
{% endembed %}
## 비 정형 그리드
일반적으로 디자인은 규칙을 정의하는 과정이지만, 이처럼 불규칙적인 레이아웃을 웹 디자인으로 구현해야 하는 상황이 주어집니다. 불규칙한 비 정형 그리드를 CSS Grid로 만드는 첫번째 단계는 행(rows)과 열(columns)의 비율을 측정하여 구현하는 것입니다.
### 열 너비 계산
디자인 된 레이아웃을 분석해 열 너비를 계산해야 합니다. 유연하게 반응하는 너비 값이 필요하므로 퍼센트(`%`) 값을 사용할 경우, 약간의 수학 지식이 요구 됩니다. 각 요소의 시작/끝 위치를 컬럼 그리드 라인으로 그린 후, 비율 계산을 수행합니다. 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;
```
### 행 높이 계산
행에 포함된 요소의 높이에 따라 높이를 변경해야 하고, 요소의 시작/끝 위치에 따라 행을 고정 높이로 설정 하거나, 유연하게 반응하는 행 높이를 설정해야 합니다. 행 높이를 설정하는 것은 열 너비를 계산하는 것보다 쉽습니다. 다행히도 CSS Grid는 유연하게 반응하는 높이 값을 설정할 수 있도록 자동으로 처리하는 `auto` 값을 지원합니다.
디자인 된 레이아웃의 행 높이를 계산하여 고정 또는 유동적으로 변경되는 행 높이를 `grid-template-rows` 속성 값으로 설정할 수 있습니다.
```css
grid-template-rows:
157px /* 고정 */
auto /* 유동 */
57px
auto
73px
170px
auto;
```
### 그리드 정의
그리드를 구성하는 행/열의 계산이 마무리 되었으니 이 값을 토대로 정의 코드를 작성합니다. 열 설정은 퍼센트(`%`) 또는 분수(`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;
}
```
### 아이템 배치
그리드 행/열을 정의하는 과정을 통해 반응하는 그리드 레이아웃이 만들어졌습니다. 이어서 자식 요소인 각 그리드 아이템 요소들을 적절한 위치에 배치해야 합니다. 디자인 요소(이미지 또는 텍스트)의 위치를 확인한 후, 다음 속성을 사용하여 배치를 설정합니다.
* `grid-column-start`
* `grid-column-end`
* `grid-row-start`
* `grid-column-end`
또는 속기형 속성을 사용할 수도 있습니다.
* `grid-column`
* `grid-row`
왼쪽 상단의 1번째 디자인 요소를 봅시다. 아래 그림과 같이 1열 \~ 5열, 2행에서 시작합니다.
아이템을 배치하는 정확한 코드는 다음과 같습니다.
```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 %}
모든 디자인 요소를 그리드에 배치한 코드는 다음과 같습니다.
```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;
}
```
### 그리드 가이드
그리드를 머리 속으로만 그려서 위치를 배치하는 것은 쉽지 않습니다. 그렇기에 Chrome 또는 Firefox 브라우저의 개발도구를 사용해 시각적으로 그리드를 확인하며 작업해야 손쉽게 배치를 할 수 있습니다.
### 반응형 뷰
작성된 Grid 코드는 태블릿/데스크탑에 적합한 코드로 모바일에서는 디자인 요소의 너비가 전체 너비를 사용하는 1컬럼 디자인으로 처리해야 합니다. 즉, 모바일 뷰에서는 Grid 코드를 적용할 필요가 없습니다. 미디어 쿼리를 사용해 모바일이 아닌 뷰에서 Grid를 처리할 수 있도록 Grid 코드를 다음과 같이 갈무리 합니다.
```css
@media (min-width: 45em /* 720px */ ) {
/* Grid 코드 작성 */
}
```
완성된 결과는 다양한 화면에서 매우 잘 반응하며 동작합니다.
### 크로스 브라우징 (IE)
IE 10+ 브라우저에서도 레이아웃이 무너지지 않고 올바르게 작동 시키려면 IE에서 적용 가능한 코드(`-ms-`)가 추가적으로 필요합니다. 다음 코드는 [CSS Grid ProjectKit for IE](/css-grid/css-grid-for-ie.md#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;
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://yamoo9.gitbook.io/css-grid/css-grid-layout-usage-guide/asymmetrical-grid-layout/wanderlust-life-jewellery.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.