by 야무(yamoo9)

Grid 템플릿 속기형

사용법

그리드 템플릿 행 / 열 / 영역 이름 설정을 속기형으로 설정 가능합니다.

속성

값

grid-template

none

<grid-template-rows> / <grid-temlate-columns>

[<line-names>? <string> <track-size>? <line-names>?] [/ <explict-track-list>]?

값

  • none: 3가지 설정을 모두 초기 값으로 적용

  • grid-template-rows / grid-template-columns: 행/열 그리드 템플릿 설정

  • 라인이름(옵션) 영역이름(필수) 트랙 크기(옵션) 라인이름(옵션)

예시

다음 예시는 그리드 행/열 템플릿을 속기형 속성으로 설정한 예입니다.

.grid-container {
  grid-template: repeat(3, 100px) / repeat(2, 20px 40px) auto;
}

속기형으로 적용된 속성을 개별 속성으로 풀어보면 다음과 같습니다.

.grid-container {
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(2, 20px 40px);
  grid-template-areas: none;
}

그리고 다소 복잡해보이지만, 행/열 그리드 템플릿에 영역이름 템플릿을 함께 설정 할 수 있습니다.

.grid-container {
  /* 2행 3열 그리드 
   * 1행 100px | 'header header header'
   * 2행 100px | 'footer footer footer'
   */
  grid-template:
    [row-1-start] "header header header" 100px [row-1-end]
    [row-2-start] "footer footer footer" 100px [row-2-end]
    / auto 200px auto;
}

속기형으로 적용된 속성을 개별 속성으로 풀어보면 다음과 같습니다.

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

※ grid-template-areas 속성은 암시적인 그리드 속성을 초기화하지 않습니다.

  • grid-auto-rows

  • grid-auto-columns

  • grid-auto-flow

실습

레퍼런스

grid-template 속성은 grid-template-{rows,columns,areas} 속성을 속기형으로 사용할 수 있도록 합니다.

PreviousGrid 템플릿 영역NextGrid 거터

Last updated