grid-container()

CSS Grid 컨테이너 믹스인

용도

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

CSS Grid 컨테이너 속성

속성	표준 값
display	grid | inline-grid
grid-template-rows	grid-template-rows 문서 참고
grid-template-columns	grid-template-cols 문서 참고
grid-template-areas	grid-template-areas 문서 참고
grid-auto-rows	grid-auto-rows 문서 참고
grid-auto-columns	grid-auto-columns 문서 참고
grid	grid 문서 참고
grid-template	grid-template 문서 참고

사용법

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

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

.usage {
  @include grid-container(
    2, 
    3, 
    10 5, 
    f row-dense, 
    justify-items-start items-start, 
    "header x2" "footer x2"
  );
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$rows	number		null
$cols	number		null
$gap	number		null
$auto	list		null
$align	list		null
$areas	list		null

믹스인에 리스트로 전달 가능한 속성 이름은 grid-container-append() 믹스인을 참고하세요.

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

.usage {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "header header" "footer footer";
  row-gap: 10px;
  column-gap: 5px;
  justify-items: start;
  align-items: start;
  grid-auto-flow: row dense;
}

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

.usage {
  @include grid-c(3, 3, 10);
}

inline-grid-container() 믹스인을 사용하면 인라인 그리드 레이아웃을 사용할 수 있습니다.

.usage {
  @include inline-grid-container(3, 3, 5);
}

로직

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

@mixin grid-container($rows: null, $cols: null, $gap: null, $auto: null, $align: null, $areas: null) {
  display: grid;
  @include grid-container-append($rows, $cols, $gap, $auto, $align, $areas);
}

1. 표시 모드를 grid로 설정

2. 전달 받은 인자가 있을 경우 grid-container-append() 믹스인에 전달

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

@mixin grid-c($rows: null, $cols: null, $gap: null, $auto: null, $align: null, $areas: null) {
  @include grid-container($rows, $cols, $gap, $auto, $align, $areas);
}

참고

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

• @mixin / @include

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

• grid-container-append()