Properties

Properties

Draft
  • account_tree
  • bug_report

grid-template

grid-template-rows, grid-template-columns, grid-template-areas 속성을 한번에 정의하는 축약성 속성이다.

설명

명시적으로 항목의 크기를 지정할 때 사용한다.

설정 가능한 속성 값

  • none기본값키워드CSS3

    명시적인 그리드가 없는 암시적인 그리드를 생성한다.

  • grid-template-rows / grid-template-columns속성 값 리스트CSS3

    grid-template-rows 값과 grid-template-columns 값을 '/'로 구분하여 작성한다. grid-template-areas 값으로 'none'으로 설정된다.

  • grid-template-areas속성 값 리스트CSS3

    grid-template-areas 값 설정

구문

  • grid-template grid-template-rows / grid-template_columns기본형식CSS3
    grid-template-rows / grid-template-columns 설정으로 그리드 레이아웃 처리 예제
  • grid-template grid-template-areas기본형식CSS3
    항목의 명시된 이름을 설정으로 그리드 레이아웃 처리 예제
  • grid-template grid-template-areas <optional>grid-template-rows / grid-template-columns기본형식CSS3
    그리드 항목의 이름(grid-area)을 행 설정('/' 기준 좌측)에서 배치 순서에 따라 행 단위로 따옴표로 감싸 작성한다.

지원 웹브라우저