> 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-container/grid-container-append/grid-auto.md).

# grid-auto()

grid-auto-\* 속성 믹스인

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

grid-auto-\* 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

* [grid-auto-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
* [grid-auto-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
* [grid-auto-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)

| 믹스인에서 사용되는 리스트 값                                                                                                                                                                                                                                                                                                                                                                      | 컴파일 되는 표준 속성                                                     |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| <p><code>flow</code> 또는 <code>f</code> → <code>row</code> <code>column</code> <code>dense</code> <code>row-dense</code> <code>column-dense</code></p><p><code>rows</code> 또는 <code>r</code> → <code>auto</code> <code>min</code> <code>max</code> <code>fr</code></p><p><code>cols</code> 또는 <code>c</code> → <code>auto</code> <code>min</code> <code>max</code> <code>fr</code></p> | <p>grid-auto-flow, <br>grid-auto-rows, <br>grid-auto-columns</p> |

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

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

> grid-auto($args:**list**)

```css
.usage {
  @include grid-auto(f row-dense r min c max);
}
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|      $args      |   list   |      ✔︎      |               |

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

```css
.usage {
  grid-auto-flow: row dense;
  grid-auto-rows: min-content;
  grid-auto-columns: max-content;
}
```

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

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

```javascript
@mixin grid-auto($args: null) {
  @if $args != null and is-include-items($args, flow f rows r cols c) {
    $flow-value: get-match-value-of-keys($args, flow f);
    @if $flow-value {
      @include auto-flow($flow-value);
    }

    $rows-value: get-match-value-of-keys($args, rows r);
    @if $rows-value {
      @include auto-rows($rows-value);
    }

    $cols-value: get-match-value-of-keys($args, cols c);
    @if $cols-value {
      @include auto-cols($cols-value);
    }
  }
}
```

1. 전달 받은 인자 값이 숫자, 리스트 유형일 경우 개별 조건 처리
2. 조건 유형에 맞지 않을 경우, 오류 메시지 출력

## 참고 <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)

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

* [auto-flow()](/scss-mixins/mixins/css-grid/grid-container/grid-container-append/grid-auto/auto-flow.md)
* [auto-rows()](/scss-mixins/mixins/css-grid/grid-container/grid-container-append/grid-auto/auto-rows.md)
* [auto-cols()](/scss-mixins/mixins/css-grid/grid-container/grid-container-append/grid-auto/auto-cols.md)
* [is-include-items()](/scss-mixins/utilities/validation/is-include-items.md)
* [get-match-value-of-keys()](/scss-mixins/utilities/list/get-match-value-of-keys.md)