라인 기반

사용법

그리드 라인을 기반으로 하여 아이템을 배치(레이아웃) 할 수 있습니다.

속성	값(공통)	비고
grid-row-start	<line>	<number> 또는 <name>
	span <number>
	span <name>
	auto
grid-row-end
grid-column-start
grid-column-end

값

값	설명
<line>	"그리드라인 번호" 또는 "그리드라인을 참조하는 이름"
span <number>	상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 개수
span <name>	상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 참조 이름
auto	자동 배치, 자동 span, 기본 span 1

예시

.item-a 아이템 요소의 배치를 그리드 라인 번호 또는 참조 이름을 사용하여 설정합니다.

.item-a {
  grid-row-start: row1-start;
  grid-row-end: 3;       /* third-line과 동일 */
  grid-column-start: 2;  /* line2와 동일 */
  grid-column-end: five;
}

상대 영역 설정

span을 사용해 상대적으로 영역을 설정할 수 있습니다.

.item-b 아이템 요소를 span 설정(상대적 범위 추가)을 사용하여 레이아웃 한 코드입니다.

.item-b {
  grid-row-start: 2;
  grid-row-end: span 2;
  grid-column-start: 1;
  grid-column-end: span col4-start;
}

grid-row-end 또는 grid-column-end 설정이 없을 경우, 아이템은 기본적으로 1개의 셀(cell) 만큼 영역으로 사용합니다. 만약 아이템 배치가 겹쳐지는 상황이 발생하면 z-index 속성 값이 높은 쪽이 위에 배치됩니다.

속기형 속성

그리드 아이템 행/열, 시작/끝 배치 설정을 속기형으로 설정할 수 있습니다.

속성	값(공통)
grid-row	<start-line> / <end-line>
	<start-line> / span <value>
grid-column

값

값	설명
<start-line>	그리드라인 시작점 (번호 또는 참조 이름)
<end-line>	그리드라인 끝점 (번호 또는 참조 이름)
span <value>	상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 개수 또는 참조 이름

예시

.item-c 아이템 요소 배치에 속기형 속성을 사용 해봅니다.

.item-c {
  grid-row: third-line / 4;  /* third-line 값과 동일하게 처리됨. */
  grid-column: 3 / span 2;
}

속기형 속성 값으로 시작점만 설정하고 끝점(<end-line>)을 설정하지 않으면 1개 셀(cell)만큼 사용 됩니다.

실습

레퍼런스

CSS Grid Layout Module Level 1

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

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#common-uses-numeric

CSS Grid Layout Module Level 1

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