Properties

Properties

Draft
  • account_tree
  • bug_report

grid-areaCSS3

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

설정 가능한 속성 값

  • auto기본값키워드CSS3
  • grid-row-start속성CSS3

    그리드 항목이 시작될 행의 위치를 정의한다.

  • grid-column-start속성CSS3

    그리드 항목을 시작할 열의 위치를 정의한다.

  • grid-row-end속성CSS3

    그리드 항목이 몇 개의 행으로 확장되는지 또는 그리드 항목이 끝나는 행의 위치를 정의한다.

  • grid-column-end속성CSS3

    그리드 항목이 몇 개의 열로 확장되는지 또는 그리드 항목이 끝나는 열의 위치를 정의한다.

구문

  • grid-area grid-row-start / grid-column-start / grid-row-end / grid-column-end;기본형식CSS3

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

    grid-template-rows/grid-auto-columns 설정으로 그리드 레이아웃 처리 예제
  • grid-area itemname;기본형식CSS3

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

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

버전 명세

Version NameDescriptionFlags
CSS3

지원 웹브라우저