by 야무(yamoo9)

라인 기반

사용법

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

속성

값(공통)

비고

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)만큼 사용 됩니다.

실습

레퍼런스

PreviousGrid 아이템 배치Next영역 기반

Last updated