Properties

Properties

Editing
  • account_tree
  • bug_report

grid-area

그리드 레이아웃에서 그리드 항목의 위치 지정에 관련된 세부 속성을 한번에 작성하는 축약식 속성이다.

사용 가능한 값 타입

〈'grid-area'〉

  • <grid-line> [ / <grid-line> ]{0,3}
    CSS Grid Layout Module Level 2

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈grid-line〉

    • auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • grid-area 〈'grid-row-start'〉 / 〈'grid-column-start'〉 / 〈'grid-row-end'〉 / 〈'grid-column-end'〉;CSS Grid Layout Module Level 2

    세부 속성 값을 /로 구분하여 작성한다.

    grid-template-rows/grid-auto-columns 설정으로 그리드 레이아웃 처리 예제
  • grid-area 〈custom-ident〉;CSS3

    그리드 항목으로 사용되는 특정 항목을 속성의 값으로 작성하여 grid-template-areas 속성에서 출력 항목으로 열을 묶을 수 있다.

    grid-template-areas 설정으로 그리드 레이아웃 처리 예제

버전 명세

Modules
Module NameStatusSummary
CSS Grid Layout Module Level 2후보 추천 초안

사용자 인터페이스 설계에 최적화된 2차원 그리드 기반 레이아웃 시스템을 정의한다.


Last review date: 2022-6-23

지원 웹브라우저