영역 기반

사용법

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 속성 값으로 grid-template-areas에 사용된 참조 이름을 사용할 수 있습니다.

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

grid-row-start / grid-column-start / grid-row-end / grid-column-end 순으로 속성 값을 설정할 수도 있습니다.

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

실습

레퍼런스

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#overview-placement