# grid-container-append()

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

기본적으로는 [grid-container()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-container/grid-container) 믹스인 내부에서 호출되어 사용되며 [Grid Container](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Container) 요소에 설정 가능한 속성 중 `display` 를 제외한 나머지 속성을 전달 받은 값을 해석하여 설정합니다. 이 믹스인은 초기 설정 후, 반응형 웹 디자인 (미디어 쿼리에 의해 레이아웃이 변경)에서 유용하게 사용될 수 있습니다.

#### 믹스인에 사용 가능한 값

| <p>매개변수</p><p></p> | <p>믹스인에서 <br>사용되는 값 예시</p>                                                                                                                                                                                                                                                                                                                                                            | <p>컴파일 되는 <br>표준 속성</p>                           |                                  |                                   |                                  |                                    |                                    |                                  |                                         |                                           |                                          |                                     |                                    |                                        |                                    |                                      |                              |                                |                   |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -------------------------------- | --------------------------------- | -------------------------------- | ---------------------------------- | ---------------------------------- | -------------------------------- | --------------------------------------- | ----------------------------------------- | ---------------------------------------- | ----------------------------------- | ---------------------------------- | -------------------------------------- | ---------------------------------- | ------------------------------------ | ---------------------------- | ------------------------------ | ----------------- |
| $rows              | `2` 또는 `none` 또는 `auto` 또는 `1fr repeat(2, 2fr) 1fr`                                                                                                                                                                                                                                                                                                                                   | grid-template-rows                                |                                  |                                   |                                  |                                    |                                    |                                  |                                         |                                           |                                          |                                     |                                    |                                        |                                    |                                      |                              |                                |                   |
| $cols              | `2` 또는 `none` 또는 `auto` 또는 `1fr repeat(2, 2fr) 1fr`                                                                                                                                                                                                                                                                                                                                   | grid-template-columns                             |                                  |                                   |                                  |                                    |                                    |                                  |                                         |                                           |                                          |                                     |                                    |                                        |                                    |                                      |                              |                                |                   |
| $gap               | `10` 또는 `10px 5px` 또는 `rem(14)`                                                                                                                                                                                                                                                                                                                                                       | gap 또는 row-gap, column-gap                        |                                  |                                   |                                  |                                    |                                    |                                  |                                         |                                           |                                          |                                     |                                    |                                        |                                    |                                      |                              |                                |                   |
| $auto              | <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> | grid-auto-flow, grid-auto-rows, grid-auto-columns |                                  |                                   |                                  |                                    |                                    |                                  |                                         |                                           |                                          |                                     |                                    |                                        |                                    |                                      |                              |                                |                   |
| $align             | 키워드 (하단 참고) ↴                                                                                                                                                                                                                                                                                                                                                                         | —                                                 |                                  |                                   |                                  |                                    |                                    |                                  |                                         |                                           |                                          |                                     |                                    |                                        |                                    |                                      |                              |                                |                   |
|                    | <p><code>justify-start</code>                                                                                                                                                                                                                                                                                                                                                         | <code>justify-center</code>                       | <code>justify-end</code>         | <br><code>justify-between</code>  | <code>justify-around</code>      | <code>justify-evenly</code>        | </p><p><code>justify-normal</code> | <code>justify-left</code>        | <code>justify-right</code>              | <br><code>justify-safe</code>             | <code>justify-unsafe</code>              | <br><code>justify-inherit</code>    | <code>justify-initial</code>       | <code>justify-unset</code></p>         | **justify**-content                |                                      |                              |                                |                   |
|                    | <p><code>justify-items-auto</code>                                                                                                                                                                                                                                                                                                                                                    | <code>justify-items-normal</code>                 | <code>justify-items-start</code> | <code>justify-items-center</code> | <code>justify-items-end</code>   | <code>justify-items-stretch</code> | <code>justify-items-left</code>    | <code>justify-items-right</code> | <br><code>justify-items-baseline</code> | <code>justify-items-first-baseline</code> | <code>justify-items-last-baseline</code> | <br><code>justify-items-safe</code> | <code>justify-items-unsafe</code>  | <br><code>justify-items-inherit</code> | <code>justify-items-initial</code> | <code>justify-items-unset</code></p> | **justify-items**            |                                |                   |
|                    | <p><code>content-normal</code>                                                                                                                                                                                                                                                                                                                                                        | <code>content-start</code>                        | <code>content-center</code>      | <code>content-end</code>          | <br><code>content-between</code> | <code>content-around</code>        | <code>content-evenly</code>        | <br><code>content-stretch</code> | <code>content-left</code>               | <code>content-right</code>                | <br><code>content-baseline</code>        | <code>content-first-baseline</code> | <code>content-last-baseline</code> | <br><code>content-safe</code>          | <code>content-unsafe</code>        | <br><code>content-inherit</code>     | <code>content-initial</code> | <code>content-unset</code></p> | align-**content** |
|                    | <p><code>items-normal</code>                                                                                                                                                                                                                                                                                                                                                          | <code>items-start</code>                          | <code>items-center</code>        | <code>items-end</code>            | <code>items-stretch</code>       | <br><code>items-baseline</code>    | <code>items-first-baseline</code>  | <code>items-last-baseline</code> | <br><code>items-safe</code>             | <code>items-unsafe</code>                 | <br><code>items-inherit</code>           | <code>items-initial</code>          | <code>items-unset</code></p>       | align-**items**                        |                                    |                                      |                              |                                |                   |
| $areas             | 예시) `"header x3" ". main ." "footer x3"`                                                                                                                                                                                                                                                                                                                                              | grid-template-areas                               |                                  |                                   |                                  |                                    |                                    |                                  |                                         |                                           |                                          |                                     |                                    |                                        |                                    |                                      |                              |                                |                   |

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

`grid-container-append()` 믹스인에 설정 가능한 값을 리스트로 전달합니다.

> grid-container-append($rows:**number**, $cols:**number**, $gap:**number**, $auto:**list**, $align:**list**, $area&#x73;**:list**)

```ruby
.usage {
  @include grid-container-append(
    2, 
    2, 
    10, 
    r minmax(100px, 200px), 
    items-center,
    "header x2" "footer x2"
  );
}
```

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

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
.usage {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "header header" "footer footer";
  gap: 10px;
  grid-auto-rows: minmax(100px, 200px);
  align-items: center;
}
```

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

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

```javascript
@mixin grid-container-append(
  $rows: null,
  $cols: null,
  $gap: null,
  $auto: null,
  $align: null
) {
  // ——————————————————————————————————————————————————————————————
  // grid-template-rows
  @if $rows != null {
    @include grid-rows($rows);
  }

  // ——————————————————————————————————————————————————————————————
  // grid-template-cols
  @if $cols != null {
    @include grid-cols($cols);
  }
  
  // ——————————————————————————————————————————————————————————————
  // grid-template-areas
  @if $areas != null {
    @include grid-areas($areas);
  }

  // ——————————————————————————————————————————————————————————————
  // gap
  @if $gap != null {
    @include gap($gap);
  }

  // ——————————————————————————————————————————————————————————————
  // grid-auto-*
  @if $auto != null {
    @include grid-auto($auto);
  }

  // ———————————————————————————————————————————————————————————————
  // box alignment

  @if $align != null {
    // justify-content
    $justify-content-values: (
      justify-start,
      justify-center,
      justify-end,
      justify-left,
      justify-right,
      justify-normal,
      justify-between,
      justify-around,
      justify-evenly,
      justify-stretch,
      justify-safe,
      justify-unsafe,
      justify-inherit,
      justify-initial,
      justify-unset
    );

    @if is-include-items($align, $justify-content-values) {
      @each $value in $align {
        @if str-index($value, 'justify-') and not
          str-index($value, 'justify-items-') and not
          str-index($value, 'justify-self-')
        {
          @include justify-content(str-replace($value, 'justify-'));
        }
      }
    }

    // justify-items
    $justify-items-values: (
      justify-items-auto,
      justify-items-normal,
      justify-items-stretch,
      justify-items-start,
      justify-items-center,
      justify-items-end,
      justify-items-left,
      justify-items-right,
      justify-items-normal,
      justify-items-baseline,
      justify-items-first-baseline,
      justify-items-last-baseline,
      justify-items-safe,
      justify-items-unsafe,
      justify-items-inherit,
      justify-items-initial,
      justify-items-unset
    );

    @if is-include-items($align, $justify-items-values) {
      @each $value in $align {
        @if str-index($value, 'justify-items-') {
          @include justify-items(str-replace($value, 'justify-items-'));
        }
      }
    }

    // align-content
    $align-content-values: (
      content-start,
      content-center,
      content-end,
      content-left,
      content-right,
      content-normal,
      content-baseline,
      content-first-baseline,
      content-last-baseline,
      content-between,
      content-around,
      content-evenly,
      content-stretch,
      content-safe,
      content-unsafe,
      content-inherit,
      content-initial,
      content-unset
    );

    @if is-include-items($align, $align-content-values) {
      @each $value in $align {
        @if str-index($value, 'content-') {
          @include align-content(str-replace($value, 'content-'));
        }
      }
    }

    // align-items
    $align-items-values: (
      items-normal,
      items-stretch,
      items-start,
      items-center,
      items-end,
      items-baseline,
      items-first-baseline,
      items-last-baseline,
      items-safe,
      items-unsafe,
      items-inherit,
      items-initial,
      items-unset
    );

    @if is-include-items($align, $align-items-values) {
      @each $value in $align {
        @if str-index($value, 'items-') and not
          str-index($value, 'justify-items-')
        {
          @include align-items(str-replace($value, 'items-'));
        }
      }
    }
  }
}
```

1. 전달 받은 인자가 없을 경우, 해당 속성을 컴파일 하지 않음
2. 전달 받은 인자가 있을 경우, 조건 처리에 따라 개별 믹스인 호출
3. 각 믹스인이 호출되면 개별 코드 출력

## 참고 <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)
* [@each](https://sass-lang.com/documentation/at-rules/control/each)

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

* [grid-rows()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-container/grid-container-append/grid-rows)
* [grid-cols()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-container/grid-container-append/grid-cols)
* [grid-areas()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-container/grid-container-append/grid-areas)
* [gap()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-container/grid-container-append/gap)
* [grid-auto()](https://yamoo9.gitbook.io/scss-mixins/mixins/css-grid/grid-container/grid-container-append/grid-auto)
* [justify-content()](https://yamoo9.gitbook.io/scss-mixins/mixins/box-alignment/justify-content)
* [justify-items()](https://yamoo9.gitbook.io/scss-mixins/mixins/box-alignment/justify-items)
* [align-content()](https://yamoo9.gitbook.io/scss-mixins/mixins/box-alignment/align-content)
* [align-items()](https://yamoo9.gitbook.io/scss-mixins/mixins/box-alignment/align-items)