grid-item()

CSS Grid 아이템 믹스인

용도

Grid Item 요소에 설정 가능한 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

CSS Grid 아이템 속성

사용법

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

grid-item($area:[string, list], $align:list)

.usage {
  @include grid-item(
    (2 3, 1 2), 
    justify-self-center self-center
  );
}

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$area

[string, list]

null

$align

list

null

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

.usage {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
  justify-self: center;
  align-self: center;
}

전달 속성 사용 예시

$area인자로 전달 가능한 값은 grid-area() 믹스인 사용 예시를 살펴보세요.

$align인자로 전달 가능한 값은 justify-self(), align-self() 믹스인 키워드를 참고하세요.

단축 믹스인 제공

grid-item() 믹스인은 이름이 길어, 보다 간추려 쓰기 위한 grid-i() 믹스인 이름도 제공합니다.

.usage {
  @include grid-i((span 2, '1 / 3'), self-baseline);
}

로직

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

@mixin grid-item($area: null, $align: null) {
  // ——————————————————————————————————————————————
  // grid-row,column,area

  @if $area != null {
    $type: type-of($area);

    // grid-area
    @if $type == 'string' {
      @include grid-area($area);
    }

    // grid-row
    // grid-column
    @if $type == 'list' {
      $row-value: first($area);
      $col-value: last($area);
      @include grid-area($row-value, $col-value);
    }
  }

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

  @if $align != null {
    // justify-self
    $justify-self-values: (
      justify-self-auto,
      justify-self-normal,
      justify-self-stretch,
      justify-self-start,
      justify-self-center,
      justify-self-end,
      justify-self-left,
      justify-self-right,
      justify-self-baseline,
      justify-self-first-baseline,
      justify-self-last-baseline,
      justify-self-safe,
      justify-self-unsafe,
      justify-self-inherit,
      justify-self-initial,
      justify-self-unset
    );

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

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

    @if is-include-items($align, $align-self-values) {
      @each $value in $align {
        @if str-index($value, 'self-') and not
          str-index($value, 'justify-self-')
        {
          @include align-self(str-replace($value, 'self-'));
        }
      }
    }
  }
}
  1. 전달 받은 영역, 정렬 속성을 분석

  2. 영역 인자 값 조건 확인 후, grid-area() 믹스인 호출

  3. 정렬 인자 값을 확인 후, 인라인(justify-self()) 또는 블록(align-self()) 라인 정렬 믹스인 호출

grid-i() 믹스인은 grid-item() 믹스인 래퍼로 보다 간단하게 쓰기 위해 작성되었습니다.

@mixin grid-i($area: null, $align: null) {
  @include grid-item($area, $align);
}

참고

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

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

Last updated