grid-container-append()

CSS Grid 컨테이너 첨부 믹스인

용도

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

믹스인에 사용 가능한 값

매개변수

믹스인에서 사용되는 값 예시

컴파일 되는 표준 속성

$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

flow 또는 f → row column dense row-dense column-dense

rows 또는 r → auto min max fr

cols 또는 c → auto min max fr

grid-auto-flow, grid-auto-rows, grid-auto-columns

$align

키워드 (하단 참고) ↴

—

justify-content

justify-items

align-content

align-items

$areas

예시) "header x3" ". main ." "footer x3"

grid-template-areas

사용법

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

grid-container-append($rows:number, $cols:number, $gap:number, $auto:list, $align:list, $areas:list)

.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로 컴파일 되어 출력됩니다.

.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;
}

로직

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

@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-'));
        }
      }
    }
  }
}

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

참고

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

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

Previousgrid-container()Nextgrid-rows()

Last updated 4 years ago