(CSS) grid 2탄 : grid line, span, grid-column, grid-row

 

지난번 포스팅에서는 grid를 만드는 방법에 대해 다루었다.

 

gird를 만들고 나서 특정 칸 두 개를 합치는 등, 레이아웃을 자유자재로 변화시키고 싶을 수 있다.

 

이럴 때 grid-column이나 grid-row를 사용하면 된다. 

 

 

 

grid line 번호

grid-column과 grid-row를 사용하기 전, grid line 번호에 대해 먼저 알아야 한다. 

 

여기 5x5 grid가 있다고 하면, 그리드를 이루는 모든 라인들이 번호를 갖게 되는데,

 

왼쪽 상단부터 1번, 그다음 라인은 2번 이런 식으로 번호가 매겨진다.

 

음수도 사용 가능하며, 주로 -1번으로 가장 끝에 있는 라인을 부른다.

 

 

 

 

span

 

grid item이 오직 하나의 트랙(column이나 row)을 사용한다면, span 속성을 사용할 수도 있다.

 

span 2라고 표기한다면, 해당 아이템은 2칸을 차지한다는 뜻과 같다.

 

 

 

grid-column, grid-row

 

grid-column은 열을 기준으로 특정 칸의 크기를 지정할 때 사용되며,

 

grid-row는 행을 기준으로 특정 칸의 크기를 지정할 때 사용된다.

 

grid-column과 grid-row 둘다 모두 한 개나 두 개의 요소를 사용한다.

 

 

<요소가 1개인 경우>

• 시작 번호 : 해당 라인에서 그리드 아이템이 시작되고 한 칸을 차지한다.
• span : 기존 위치에서 span 값 만큼 차지하는 칸 수가 바뀐다.

 

<요소가 2개인 경우>

• 시작라인 번호 / 종료 라인 번호 : 시작 라인에서 그리드 아이템이 시작되어, 종료 라인에서 아이템이 끝난다.
• 시작 라인번호 / span : 시작 라인에서 그리드 아이템이 시작되어, span 값 만큼 칸을 차지한다.
• span / 종료 라인 번호 : span 값 만큼 칸을 차지하는 그리드 아이템이 종료 라인 번호에서 끝난다.

 

 

사용 예시

See the Pen grid-row, grid-column by 김다영 (@xnpzlttb-the-solid) on CodePen.

 

 

 

 

 

(CSS) grid 1탄 : grid 만들기, grid-template, gap