영역 기반

사용법

grid-area 속성에 다음 유형을 사용하여 아이템을 배치시킬 수 있습니다.

속성

값(공통)

grid-area

<name>

<row-start> / <column-start> / <row-end> / <column-end>

값

설명

<name>

grid-template-areas에 등록된 참조 이름

<row-start> / <column-start> / <row-end> / <column-end>

그리드라인 번호 또는 참조 이름

예시

grid-area 속성 값으로 에 사용된 참조 이름을 사용할 수 있습니다.

.item-d {
  grid-area: header;
}

순으로 속성 값을 설정할 수도 있습니다.

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

Last updated 6 years ago