Grid 속기형 속성

사용법

하나의 속성에 다음 속성들을 모두 일괄 설정할 수 있는 grid 속기형 속성입니다.

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

값

예시

2행 3열 그리드 설정입니다.

.grid-container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

위 설정을 grid 속기형 속성으로 작성하면 다음과 같습니다.

.grid-container {
  grid: 200px auto / 1fr auto 1fr;
}

column 자동 배치 알고리즘 설정에 암시적인 행/열 크기 설정입니다.

.grid-container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

위 설정을 속기형으로 작성하면 다음과 같습니다.

.grid-container {
  grid: column 1fr / auto;
}

좀 더 복잡하지만 다음 속성을 모두 포함하는 속기형 작성을 사용하면 보다 편리합니다.

설정되지 않은 다른 속성은 기본 값으로 설정됩니다.

.grid-container {
  grid:
    [row-1-start] "header header header" 1fr [row-1-end]
    [row-2-start] "footer footer footer" 60px [row-2-end]
    / auto 100px auto;
}

.grid-container {
  grid-template-rows: [row-1-start] 1fr [row-1-end row-2-start] 60px [row-2-end];
  grid-template-columns: auto 100px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

레퍼런스

PreviousGrid 자동 배치 패킹 설정 Nextfr 단위

Last updated 6 years ago