> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-item/grid-area.md).

# grid-area()

## 용도 <a href="#use" id="use"></a>

[grid-area](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

{% hint style="info" %}
grid-area() 믹스인은 [grid-item()](/scss-mixins/mixins/css-grid/grid-item/grid-item.md) 믹스인 내부에서 활용되는 모듈입니다.
{% endhint %}

## 사용법 <a href="#usage" id="usage"></a>

`grid-area()` 믹스인에 설정 가능한 값을 전달합니다.

> grid-area($row:**\[string, number, list], $col:\[number, list]**)

```javascript
.usage {
  @include grid-area(1 2, span 2);
}
```

| 매개변수(parameter) |         유형(type)        | 필수(required) | 기본 값(default) |
| :-------------: | :---------------------: | :----------: | :-----------: |
|       $row      | \[string, number, list] |              |     `null`    |
|       $col      |     \[number, list]     |              |     `null`    |

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column: span 2 / span 2;
}
```

#### 사용 예시 <a href="#examples" id="examples"></a>

**예시 1. 문자 값**

```javascript
.usage {
  @include grid-area('search-bar');
}
```

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-area: "search-bar";
}
```

**예시 2. 숫자 값**

```javascript
.usage {
  @include grid-area(1, 1);
}
```

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-row: 1;
  grid-column: 1;
}
```

**예시 3. 리스트 값**

```javascript
.usage {
  @include grid-area(1 3, 2 3);
}
```

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}
```

**예시 4-1. 키워드를 포함한 리스트 값 (키워드:** `start` | `s` | `end` | `e`**)**

```javascript
.usage {
  @include grid-area(s 1, e 1); // s = start, e = end
}
```

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-row-start: 1;
  grid-column-end: 1;
}
```

**예시 4-2. 키워드를 포함한 리스트 값 (키워드:** `span`**)**

```javascript
.usage {
  @include grid-area(span 2, span full);
}
```

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-row: span 2 / span 2;
  grid-column: 1 / -1;
}
```

**예시 5.** `/`**를 포함한 문자 값**

```javascript
.usage {
  @include grid-area('1 / 3', '2 / 3');
}
```

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
```

## 로직 <a href="#logic" id="logic"></a>

`grid-area()` 믹스인은 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@mixin grid-area($rows: null, $cols: null) {
  $rows-type: type-of($rows);
  $cols-type: type-of($cols);

  @if $rows-type == 'list' {
    $span-value: get-match-value-of-keys($rows, span);
    $start-value: get-match-value-of-keys($rows, start s);
    $end-value: get-match-value-of-keys($rows, end e);
    @if $span-value {
      @include grid-row(span, $span-value);
    } @else if $start-value {
      @include grid-row(start, $start-value);
    } @else if $end-value {
      @include grid-row(end, $end-value);
    } @else {
      @include grid-row(se, $rows);
    }
  }
  
  @if $rows-type == 'number' or $rows-type == 'string' and str-index($rows, '/') {
    @include grid-row($rows);
  }

  @if $cols-type == 'list' {
    $span-value: get-match-value-of-keys($cols, span);
    $start-value: get-match-value-of-keys($cols, start s);
    $end-value: get-match-value-of-keys($cols, end e);
    @if $span-value {
      @include grid-col(span, $span-value);
    } @else if $start-value {
      @include grid-col(start, $start-value);
    } @else if $end-value {
      @include grid-col(end, $end-value);
    } @else {
      @include grid-col(se, $cols);
    }
  }
  
  @if $cols-type == 'number' or $cols-type == 'string' and str-index($cols, '/') {
    @include grid-col($cols);
  }

  // 그리드 영역(grid-area)을 문자 값으로 전달한 경우
  @if $rows-type == 'string' and not str-index($rows, '/') {
    grid-area: $rows;
  }
}
```

1. 전달 받은 인자 값을 분석하여 조건 처리

## 참고 <a href="#reference" id="reference"></a>

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)
* [type-of()](https://sass-lang.com/documentation/modules/meta#type-of)
* [str-index()](https://sass-lang.com/documentation/modules/string#index)

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

* [get-match-value-of-keys()](/scss-mixins/utilities/list/get-match-value-of-keys.md)
* [grid-row()](/scss-mixins/mixins/css-grid/grid-item/grid-row.md)
* [grid-col()](/scss-mixins/mixins/css-grid/grid-item/grid-col.md)