# grid-row()

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

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

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

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

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

> grid-row($type:**string**, $valu&#x65;**:\[number, list]**)

```javascript
.usage {
  // 키워드: start | s | end | e | start-end | se | span
  @include grid-row(se, 2 4);
}
```

| 매개변수(parameter) |     유형(type)    | 필수(required) | 기본 값(default) |
| :-------------: | :-------------: | :----------: | :-----------: |
|      $type      |      string     |      ✔︎      |               |
|      $value     | \[number, list] |      ✔︎      |               |

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

```css
.usage {
  grid-row-start: 2;
  grid-row-end: 4;
}
```

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

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

```javascript
@mixin grid-row($type, $value: null) {
  @if $type == 'span' {
    @include row-span($value);
  }
  @if $type == 'start' or $type == 's' {
    @include row-start($value);
  }
  @if $type == 'end' or $type == 'e' {
    @include row-end($value);
  }
  @if $type == 'start-end' or $type == 'se' {
    @include row-start(nth($value, 1));
    @include row-end(nth($value, 2));
  }
  @if not is-valid-keywords($type, span start end start-end s e se) {
    grid-row: if(type-of($type) == string, unquote($type), $type);
  }
}
```

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)
* [unquote()](https://sass-lang.com/documentation/modules/string#unquote)
* [if()](https://sass-lang.com/documentation/modules#if)

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

* [row-span()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-item/grid-row/row-span)
* [row-start()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-item/grid-row/row-start)
* [row-end()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-item/grid-row/row-end)
* [is-valid-keywords()](https://yamoo9.gitbook.io/scss-mixins/utilities/validation/is-valid-keywords)