CSS 페이지 레이아웃 4부 - grid layout 그리드 셀 속성

CSS 페이지 레이아웃 속성은 사용자가 원하는 대로 요소들을 배치하기 위해 사용하며, Display, Flexbox, Grid, Floats, Positioning, Table Layout, Multistage Layout 등이 있다. 속성마다 장단점이 있어서 각 속성을 정확히 파악하고 사용해야 한다. Grid Layout Cell 속성에 대한 정보를 기록하고자 CSS 페이지 레이아웃 4부를 작성했다.

주의사항
1. 모든 예시는 크롬 브라우저 기준이다.
2. 그리드 레이아웃은 플렉스 레이아웃보다 훨씬 더 복잡하기 때문에 가장 기본적인 예시만 다룬다.
3. 그리드 레이아웃을 설명할 때 아랍어 방향은 고려하지 않는다.
4. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

Display Grid

○ 정의

요소의 Display Outside 속성이 block으로 변경되고, grid layout 모델에 따라 내용을 배치한다. grid layout 모델은 2차원 레이아웃에 최적화되어 있다. 한 요소에 display: grid를 적용하면 해당 요소가 그리드 컨테이너가 되고, 하위 요소가 그리드 항목이 된다.

○ 특징

– px을 사용하면 고정된 길이의 그리드를 생성할 수 있고, fr을 사용하면 유연한 길이의 그리드를 생성할 수 있다.
– 그리드 항목에 위치값을 지정해서 정확한 위치에 배치할 수 있고, 그리드 항목에 위치값이 지정되어 있지 않더라도 그리드 레이아웃 알고리즘에 의해 자동으로 적절한 위치에 배치된다.
– 그리드 항목이 명시적으로 길이가 지정된 그리드 트랙을 벗어나면 해당 위치에 맞춰 임의의 그리드 트랙이 자동으로 생성된다.
– 정렬 속성을 사용해서 그리드 항목의 정렬을 제어할 수 있다.
– z-index를 사용해서 그리드 항목이나 그리드 영역을 두 개이상 겹칠 수 있다.

○ 코드 사용

display: grid;

○ 호환성

– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 10월에 출시한 엣지 16 버전, 삼성 인터넷 6.2 버전 이상에서 지원한다.
– 2015년 7월에 출시한 엣지 12 버전부터 사용하려면 접두사 -ms-를 붙여야 한다.

display: -ms-grid;
display: grid;

○ 속성 요약

1. 그리드 셀 속성

(1) grid-area: 그리드 컨테이너 내 그리드 라인 또는 그리드 영역 이름을 기준으로 그리드 항목의 크기와 위치를 설정한다. grid-row-start, grid-column-start, grid-row-end, grid-column-end 속성의 단축 구문이다.
(2) grid-row: 그리드 컨테이너 내 행 방향으로 나열된 그리드 라인 중 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정한다. grid-row-start, grid-row-end 속성의 단축 구문이다.
(3) grid-row-start: 그리드 컨테이너 내 행 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘시작 그리드 라인’을 설정한다.
(4) grid-row-end: 그리드 컨테이너 내 행 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘끝 그리드 라인’을 설정한다.
(5) grid-column: 그리드 컨테이너 내 열 방향으로 나열된 그리드 라인 중 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정한다. grid-column-start, grid-column-end 속성의 단축 구문이다.
(6) grid-column-start: 그리드 컨테이너 내 열 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘시작 그리드 라인’을 설정한다.
(7) grid-column-end: 그리드 컨테이너 내 열 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘끝 그리드 라인’을 설정한다.

2. 그리드 컨테이너 속성

(1) grid: 그리드 컨테이너 내 명시적인 그리드 속성과 암시적인 그리드 속성을 설정한다.
(2) grid-template: 그리드 컨테이너 내 명시적인 그리드 영역과 각 그리드 셀의 이름을 설정하고, 각 행과 열 방향으로 나열되는 그리드 트랙의 크기를 설정한다.
(3) grid-template-rows: 그리드 컨테이너 내 행 방향으로 나열되는 그리드 라인의 이름과 그리드 트랙의 크기를 설정한다.
(4) grid-template-columns: 그리드 컨테이너 내 열 방향으로 나열되는 그리드 라인의 이름과 그리드 트랙의 크기를 설정한다.
(5) grid-template-areas: 그리드 컨테이너 내 명시적인 그리드 영역과 그리드 셀의 이름을 설정한다.
(6) grid-auto-flow: 그리드 컨테이너 내 자동 배치 알고리즘이 작동하는 방식을 설정한다.
(7) grid-auto-rows: 그리드 컨테이너 내 행 방향으로 나열되는 암시적인 그리드 트랙의 크기를 설정한다.
(8) grid-auto-columns: 그리드 컨테이너 내 열 방향으로 나열되는 암시적인 그리드 트랙의 크기를 설정한다.
(9) gap(grid-gap): 그리드 컨테이너 내 행 방향의 그리드 트랙과 열 방향의 그리드 트랙 사이의 간격을 설정한다.
(10) row-gap(grid-row-gap): 그리드 컨테이너 내 행 방향의 그리드 트랙 사이의 간격을 설정한다.
(11) column-gap(grid-column-gap): 그리드 컨테이너 내 열 방향의 그리드 트랙 사이의 간격을 설정한다.

3. 그리드 컨테이너 정렬 속성

(1) place-content
(2) align-content
(3) justify-content
(4) place-items
(5) align-items
(6) justify-items
(7) place-self
(8) align-self
(9) justify-self

○ 용어

1. 그리드 트랙

그리드에서 두 선 사이의 공간으로 그리드 항목이 나열되는 행과 열을 의미한다. grid-template-rows, grid-template-columns 속성으로 공간을 분할하는 개수 및 길이를 설정한다.

(1) fr 단위

fraction의 약자로 유연한 길이 단위이다. grid-template-rows, grid-template-columns 속성에 px를 사용하면 트랙의 길이가 고정되고, fr을 사용하면 트랙의 길이가 유연해진다. 예를 들어 그리드 항목이 6개일 때 grid-template-columns: 20px 2fr 3fr를 적용하면, 길잇값이 3개 작성된 만큼 그리드 컨테이너의 열이 3개로 분할되고, 그리드 항목 6개가 그리드 컨테이너에 들어가야 하는 만큼 grid-auto-rows: auto에 의해 2행 3열의 공간이 생성된다. 그리고 첫 번째 열은 20px로 고정되고, 두 번째 열은 그리드 컨테이너 열에서 20px을 제외한 나머지 공간의 2/5를 차지하게 되고, 세 번째 열은 그리드 컨테이너 열에서 20px을 제외한 공간의 3/5를 차지하게 된다. 이때 그리드 컨테이너의 너비가 변한다면 그에 따라 fr 단위가 적용된 열의 길이도 변한다.

(2) repeat() 표기법

그리드 트랙 생성 시 동일한 값을 반복해서 적용할 때 repeat(반복 횟수, 길이 … 길이)를 사용한다. 예를 들어 grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr의 경우 grid-template-columns: repeat(5, 1fr 2fr)로 작성한다.

(3) 명시적인 그리드 트랙과 암시적인 그리드 트랙

명시적인 그리드 트랙은 grid-template-rows, grid-template-columns 속성을 사용해서 그리드 트랙의 크기를 임의로 지정한 트랙이다. 암시적인 그리드 트랙은 특정 그리드 항목의 위치가 명시적인 그리드 트랙을 벗어나면 그리드 레이아웃 알고리즘에 의해 자동으로 추가되는 트랙이다. 예를 들어 그리드 항목이 6개인 그리드 컨테이너에 grid-template-colulmns: 20px 2fr 3fr이 적용되고 grid-template-rows 속성이 적용되지 않으면 1행 3열 그리드가 형성되는데, 그리드 항목 6개가 모두 배치될 수 있도록 그리드 알고리즘에 의해 행 방향으로 암시적인 그리드 트랙이 추가된다. 암시적인 그리드 트랙의 크기는 grid-auto-rows: auto(기본값), grid-auto-columns: auto(기본값)이 적용되어 그리드 항목 내 콘텐츠의 크기를 따른다.

(4) minmax() 함수

그리드 트랙의 최소 크기와 최대 크기를 설정할 때 minmax(최소 크기, 최대 크기)를 사용한다. 예를 들어 grid-auto-rows: minmax(100px, auto)를 적용하면 암시적인 그리드 트랙의 최소 높이는 100px이고 최대 높이는 auto로 설정된다. 최대 높이가 auto로 설정되면 그리드 항목 내 콘텐츠의 높이 값을 따르게 되는데, 그리드 컨테이너 내 각 행에서 그리드 항목의 높이 값이 서로 다르다면 각 행에서 높이 값이 가장 큰 그리드 항목의 높이 값을 따르게 된다.

2. 그리드 라인

그리드 트랙이 생성될 때 그리드 라인에 번호가 매겨진다. grid-row-start, grid-row-end로 행 방향의 그리드 영역을 지정하고, grid-column-start, grid-column-end로 열 방향의 그리드 영역을 지정한다.

3. 그리드 셀

그리드를 구성하는 가장 작은 단위이다.

4. 그리드 영역

행 또는 열 어느 방향으로든 하나 이상의 셀에 걸쳐져 있는 직사각형의 영역이다.

5. 그리드 간격

그리드 셀 사이의 여백 혹은 간격이다. grid-row-gap, grid-column-gap, grid-gap을 적용해서 그리드 컨테이너 내 가장자리를 제외한 나머지 그리드 셀 사이의 간격을 설정한다. 참고로 그리드 생성 시 그리드 간격이 먼저 설정되고 그리드 트랙이 설정된다.

○ 그리드 속성 학습

– Grid Garden: https://codepip.com/games/grid-garden/
GRID 코드를 입력해서 당근 정원을 키우는 게임으로 grid-column-start, grid-column-end, span 값, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows, repeat 값, fr 단위, grid-template의 사용법을 익힐 수 있다.

Grid Layout 그리드 셀 속성

○ grid-area

1. 정의

그리드 컨테이너 내 행 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정하고, 열 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정한다. grid-row-start, grid-column-start, grid-row-end, grid-column-end 속성의 단축 구문으로 grid-template-rows, grid-template-columns 속성이 적용된 상태에서만 정상적으로 작동한다.

2. 코드 사용

grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;
grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
grid-area: <number>;
grid-area: <number> / <number>;
grid-area: <number> / <number> / <number>;
grid-area: <number> / <number> / <number> / <number>;
grid-area: <line-name>;
grid-area: <line-name> / <line-name>;
grid-area: <line-name> / <line-name> / <line-name>;
grid-area: <line-name> / <line-name> / <line-name> / <line-name>;
grid-area: <area-name>;
grid-area: <area-name> / <area-name>;
grid-area: <area-name> / <area-name> / <area-name>;
grid-area: <area-name> / <area-name> / <area-name> / <area-name>;

(참고: <line-name>과 <number> 조합은 사용 조건이 까다롭고 이해하기가 어려워서 제외했다)

3. 호환성

– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.

4. 속성

(1) grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>
네 가지 값이 지정된 경우 첫 번째 값은 grid-row-start 속성, 두 번째 값은 grid-column-start 속성, 세 번째 값은 grid-row-end 속성, 네 번째 값은 grid-column-end 속성으로 설정된다.

(2) grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end>
grid-column-end 속성이 생략되면 gird-column-start 속성에 적용된 값이 grid-column-end 속성에 동일하게 적용되거나 동일한 값이 적용될 수 없다면 auto가 적용된다.

(3) grid-area: <grid-row-start> / <grid-column-start>
grid-row-end 속성이 생략되면 grid-row-start 속성에 적용된 값이 grid-row-end 속성에 동일하게 적용되거나 동일한 값이 적용될 수 없다면 auto가 적용된다.

(4) grid-area: <grid-row-start>
grid-row-start 속성을 제외한 grid-column-start, grid-row-end, grid-column-end 속성이 생략되면 grid-row-start 속성에 적용된 값이 나머지 속성에 동일하게 적용되거나 동일한 값이 적용될 수 없다면 auto가 적용된다.

5. 코드 예시

※ 그리드 컨테이너 속성
grid-template-columns: [col1-st] 1fr [col1-en col2-st] 1fr [col2-en col3-st] 1fr [col3-en];
grid-template-rows: [row1-li] 1fr [row2-li] 1fr [row3-li] 1fr [row4-li];
grid-template-area:
"hd hd hd"
"sd mn mn"
"ft ft ft";
※ 그리드 레이아웃은 3행 3열이고, 그리드 항목은 6개이다.

(1) grid-area: row1-li / col2-st / row3-li / col3-en;

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인부터 세 번째 그리드 라인까지 행 방향의 그리드 영역이 설정되고, 열 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인부터 네 번째 그리드 라인까지 열 방향의 그리드 영역이 설정된다.

(2) grid-area: row1-li / col2-st / row3-li;

bbb

ccccc

ddd

eeee

grid-column-end 속성이 생략되었기 때문에 grid-column-end 속성에는 grid-column-start 속성값이 적용되는데, grid-column-start 속성값인 col2-st가 중복으로 적용될 수 없기 때문에 auto가 적용된다. 행 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인부터 세 번째 그리드 라인까지 행 방향의 그리드 영역이 설정되고, 열 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인부터 세 번째 그리드 라인까지 열 방향의 그리드 영역이 설정된다.

(3) grid-area: row1-li / col2-st;

bbb

ccccc

ddd

eeee

grid-row-end 속성이 생략되었기 때문에 grid-row-end 속성에는 grid-row-start 속성값이 적용되는데, grid-row-start 속성값인 row1-li가 중복으로 적용될 수 없기 때문에 auto가 적용된다. 그리고 grid-column-end 속성이 생략되었기 때문에 grid-column-end 속성에는 grid-column-start 속성값이 적용되는데, grid-column-start 속성값인 col2-st가 중복으로 적용될 수 없기 때문에 auto가 적용된다. 행 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인부터 세 번째 그리드 라인까지 행 방향의 그리드 영역이 설정되고, 열 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인부터 세 번째 그리드 라인까지 열 방향의 그리드 영역이 설정된다.

(4) grid-area: row1-li;

bbb

ccccc

ddd

eeee

grid-row-end 속성이 생략되었기 때문에 grid-row-end 속성에는 grid-row-start 속성값이 적용되는데, grid-row-start 속성값인 row1-li가 중복으로 적용될 수 없기 때문에 auto가 적용된다. 그리고 grid-column-start, grid-column-end 속성이 생략되었기 때문에 각 속성에는 grid-row-start 속성값이 적용되는데, 행 방향의 그리드 라인 이름이 열 방향의 그리드에 지정될 수 없기 때문에 그리드 컨테이너 내 열 방향의 암시적인 그리드 트랙이 하나 추가되고 추가된 열에 grid-column-start: auto, grid-column-end: auto가 적용된 그리드 영역이 설정된다.

(5) grid-area: sd;

bbb

ccccc

ddd

eeee

grid-template-area 속성으로 지정된 sd 영역이 그리드 영역으로 설정된다. 새롭게 배치된 그리드 영역이 HTML 작성 순서상 앞선 그리드 항목보다 앞에 배치되면 기존에 배치되었던 그리드 항목은 자동으로 뒤로 밀려난다.

(6) grid-area: mn;

bbb

ccccc

ddd

eeee

grid-template-area 속성으로 지정된 mn 영역이 그리드 영역으로 설정된다. 새롭게 배치된 그리드 영역이 HTML 작성 순서상 앞선 그리드 항목보다 앞에 배치되면 기존에 배치되었던 그리드 항목은 자동으로 뒤로 밀려난다.

(7) grid-area: hd;

bbb

ccccc

ddd

eeee

grid-template-area 속성으로 지정된 hd 영역이 그리드 영역으로 설정된다. 새롭게 배치된 그리드 영역이 HTML 작성 순서상 앞선 그리드 항목보다 앞에 배치되면 기존에 배치되었던 그리드 항목은 자동으로 뒤로 밀려난다.

(8) grid-area: sd / ft;

bbb

ccccc

ddd

eeee

grid-template-area 속성으로 지정된 sd 영역이 행 방향의 그리드 영역으로 설정되고, ft 영역이 열 방향의 그리드 영역으로 설정된다. 새롭게 배치된 그리드 영역이 HTML 작성 순서상 앞선 그리드 항목보다 앞에 배치되면 기존에 배치되었던 그리드 항목은 자동으로 뒤로 밀려난다.
행 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인부터 세 번째 그리드 라인까지 행 방향의 그리드 영역이 설정되고, 열 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인부터 네 번째 그리드 라인까지 열 방향의 그리드 영역이 설정된다.

(9) grid-area: ft / sd;

bbb

ccccc

ddd

eeee

grid-template-area 속성으로 지정된 ft 영역이 행 방향의 그리드 영역으로 설정되고, sd 영역이 열 방향의 그리드 영역으로 설정된다. 새롭게 배치된 그리드 영역이 HTML 작성 순서상 앞선 그리드 항목보다 앞에 배치되면 기존에 배치되었던 그리드 항목은 자동으로 뒤로 밀려난다.
행 방향으로 나열된 그리드 라인 중 세 번째 그리드 라인부터 네 번째 그리드 라인까지 행 방향의 그리드 영역이 설정되고, 열 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인부터 두 번째 그리드 라인까지 열 방향의 그리드 영역이 설정된다.

(10) grid-area: hd / 2;

bbb

ccccc

ddd

eeee

grid-template-area 속성으로 지정된 hd 영역이 행 방향의 그리드 영역으로 설정된다. 그리고 grid-column-start 속성값에 2가 적용되고, grid-column-end 속성값에 2가 중복으로 적용될 수 없기 때문에 auto가 적용된다. 새롭게 배치된 그리드 영역이 HTML 작성 순서상 앞선 그리드 항목보다 앞에 배치되면 기존에 배치되었던 그리드 항목은 자동으로 뒤로 밀려난다.
행 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인부터 세 번째 그리드 라인까지 행 방향의 그리드 영역이 설정되고, 열 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인부터 세 번째 그리드 라인까지 열 방향의 그리드 영역이 설정된다.

(11) grid-area: hd / ft / sd;

bbb

ccccc

ddd

eeee

grid-template-area 속성으로 지정된 hd 영역부터 sd 영역까지 행 방향의 그리드 영역으로 설정되고, ft 영역이 열 방향의 그리드 영역으로 설정된다. 새롭게 배치된 그리드 영역이 HTML 작성 순서상 앞선 그리드 항목보다 앞에 배치되면 기존에 배치되었던 그리드 항목은 자동으로 뒤로 밀려난다.
grid-area 속성이 적용되는 그리드 항목의 크기가 1행에서 2행으로 늘어나는 만큼 3행 3열 그리드가 4행 3열이 되어야 하므로 행 방향으로 암시적인 그리드 트랙이 추가된다. 행 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인부터 두 번째 그리드 라인까지 행 방향의 그리드 영역이 설정되고, 열 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인부터 네 번째 그리드 라인까지 열 방향의 그리드 라인이 설정된다. grid-area 속성이 적용된 그리드 항목이 첫 번째로 배치되기 때문에 HTML 작성 순서상 기존 위치에 있던 그리드 항목은 자동으로 뒤로 밀려난다.

○ grid-row

1. 정의

그리드 컨테이너 내 행 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정한다. grid-row-start, grid-row-end 속성의 단축 구문으로 grid-template-rows 속성이 적용된 상태에서만 정상적으로 작동한다.

2. 코드 사용

grid-row: auto;
grid-row: <number>;
grid-row: <line-name>;
grid-row: <grid-row-start> / <grid-row-end>;
grid-row: auto / auto;
gird-row: <number> / <number>;
grid-row: <line-name> / <line-name>;
gird-row: span <number>;
grid-row: span <line-name>;
grid-row: <number> <line-name> span;
grid-row: <number> <line-name> span / <number> <line-name> span;

grid-row 속성값에 <양수> / <음수>, <음수> / <이름> 등 서로 다른 속성값을 작성해도 되지만, span은 둘 중하나에만 작성해야 한다. (참고: <line-name>과 <number> 조합은 사용 조건이 까다롭고 이해하기가 어려워서 제외했다)

3. 호환성

4. 속성

(1) grid-row: auto;
기본값이다.

(2) grid-row: <시작 그리드 라인 양수> / <끝 그리드 라인 양수>
그리드 컨테이너 내 행 방향으로 나열된 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인부터 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인의 번호를 넘어서는 양수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 양수 값을 기준으로 ‘그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 ‘grid-row: <양수> / <양수> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row: <양수> / <양수> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(3) grid-row: <시작 그리드 라인 음수> / <끝 그리드 라인 음수>
그리드 컨테이너 내 행 방향으로 나열된 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인부터 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인의 번호를 넘어서는 음수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 음수 값을 기준으로 ‘그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 ‘grid-row: <음수> / <음수> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row: <음수> / <음수> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(4) grid-row: <시작 그리드 라인 이름> / <끝 그리드 라인 이름>
그리드 라인의 번호 대신 grid-template-rows 속성에서 설정한 그리드 라인 이름을 기준으로 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 ‘grid-row: <이름> / <이름> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row: <이름> / <이름> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(5) grid-row: span <시작 그리드 라인 번호 양수 값 또는 이름> / <끝 그리드 라인>
span 키워드 뒤에 양수 값을 작성하면 grid-row-end의 속성값에 상대적인 그리드 영역이 설정된다. grid-row-end 속성값이 auto(기본값)면 행 방향의 현재 ‘시작 그리드 라인’부터 시작 그리드 라인 번호에 양수 값을 더한 그리드 라인 번호까지 그리드 영역이 설정되고, grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이지만 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되지 않는다. 그리고 grid-row-end 속성값이 양수 또는 음수 또는 이름값이면 grid-row-end 속성으로 지정된 ‘끝 그리드 라인’부터 끝 그리드 라인 번호에서 양수 값을 뺀 그리드 라인 번호까지 그리드 영역이 설정되고, grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 ‘grid-row 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row 속성이 적용된 그리드 항목’ 좌우로 나열된다.

○ grid-row-start

1. 정의

그리드 컨테이너 내 행 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘시작 그리드 라인’을 설정한다. grid-template-rows 속성이 적용된 상태에서만 정상적으로 작동한다.

2. 코드 사용

grid-row-start: auto;
grid-row-start: <number>;
grid-row-start: <line-name>;
grid-row-start: <number> <line-name>;
grid-row-start: span <number>;
grid-row-start: span <line-name>;
grid-row-start: <number> <line-name> span;

– <number>: 양수 또는 음수이다.
– <line-name>: grid-template-rows 속성에서 설정한 그리드 라인 이름이다.

3. 호환성

4. 속성

(1) grid-row-start: auto
기본값이다.

(2) grid-row-start: <그리드 라인 양수 번호>
그리드 컨테이너 내 행 방향으로 나열된 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인부터 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘시작 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인의 번호를 넘어서는 양수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 양수 값을 기준으로 ‘시작 그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 ‘grid-row-start: <양수> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start: <양수> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(3) grid-row-start: <그리드 라인 음수 번호>
그리드 컨테이너 내 행 방향으로 나열된 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인부터 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘시작 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인의 번호를 넘어서는 음수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 음수 값을 기준으로 ‘시작 그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 ‘grid-row-start: <음수> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start: <음수> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(4) grid-row-start: <그리드 라인 이름>
그리드 라인의 번호 대신 grid-template-rows 속성에서 설정한 그리드 라인 이름을 기준으로 그리드 항목의 ‘시작 그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 ‘grid-row-start: <이름> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start: <이름> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(5) grid-row-start: span <그리드 라인 번호 양수 값 또는 이름>
span 키워드 뒤에 양수 값을 작성하면 grid-row-end의 속성값에 상대적인 그리드 영역이 설정된다. grid-row-end 속성값이 auto(기본값)면 행 방향의 현재 ‘시작 그리드 라인’부터 시작 그리드 라인 번호에 양수 값을 더한 그리드 라인 번호까지 그리드 영역이 설정되고, grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이지만 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되지 않는다. 그리고 grid-row-end 속성값이 양수 또는 음수 또는 이름값이면 grid-row-end 속성으로 지정된 ‘끝 그리드 라인’부터 끝 그리드 라인 번호에서 양수 값을 뺀 그리드 라인 번호까지 그리드 영역이 설정되고, grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 ‘grid-row-start 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start 속성이 적용된 그리드 항목’ 좌우로 나열된다.

5. 코드 예시

※ 그리드 컨테이너 속성
grid-template-columns: [col1-st] 1fr [col1-en col2-st] 1fr [col2-en col3-st] 1fr [col3-en];
grid-template-rows: [row1-li] 1fr [row2-li] 1fr [row3-li] 1fr [row4-li];
※ 그리드 레이아웃은 3행 3열이고, 그리드 항목은 6개이다.

(1) grid-row-start: auto

bbb

ccccc

ddd

eeee

기본값이다.

(2) grid-row-start: 2

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인이 ‘시작 그리드 라인’으로 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(3) grid-row-start: row4-li

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인을 ‘시작 그리드 라인’으로 설정하기 위해 암시적인 그리드 트랙 1행이 추가되고 행 방향으로 나열된 네 번째 그리드 라인부터 다섯 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(4) grid-row-start: row4-li, grid-row-end: 2

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인이 ‘시작 그리드 라인’으로 설정되고, 두 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정되어 두 번째 그리드 라인부터 네 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(5) grid-row-start: span 2

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인부터 두 번째 그리드 라인 번호에 2를 더한 네 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이지만 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되지 않는다.

(6) grid-row-start: span 2, grid-row-end: 3

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 세 번째 그리드 라인부터 세 번째 그리드 라인 번호에 2를 뺀 첫 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(7) grid-row-start: -1

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 그리드 라인 번호가 -1인 네 번째 그리드 라인이 ‘시작 그리드 라인’으로 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(8) 두 번째 그리드 항목부터 다섯 번째 그리드 항목까지 같은 grid-row-start: 2를 적용했을 때

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인이 ‘시작 그리드 라인’으로 설정된다. 3행 3열 그리드의 2행에 네 가지 그리드 항목이 나열되기 위해 암시적인 그리드 트랙 1열이 추가된다. 참고로 그리드 컨테이너에 암시적인 그리드 트랙이 추가되면 암시적인 그리드 트랙의 최소 크기가 콘텐츠의 크기로 설정되고, 암시적인 그리드 트랙의 크기만큼 명시적인 그리드 트랙의 크기가 일정 비율로 줄어든다.

○ grid-row-end

1. 정의

그리드 컨테이너 내 행 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘끝 그리드 라인’을 설정한다. grid-template-rows 속성이 적용된 상태에서만 정상적으로 작동한다.

2. 코드 사용

grid-row-end: auto;
grid-row-end: <number>;
grid-row-end: <line-name>;
grid-row-end: <number> <line-name>;
grid-row-end: span <number>;
grid-row-end: span <line-name>;
grid-row-end: <number> <line-name> span;

– <number>: 양수 또는 음수이다.
– <line-name>: grid-template-rows 속성에서 설정한 그리드 라인 이름이다.

3. 호환성

4. 속성

(1) grid-row-end: auto
기본값이다.

(2) grid-row-end: <그리드 라인 양수 번호>
그리드 컨테이너 내 행 방향으로 나열된 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인부터 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘끝 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인의 번호를 넘어서는 양수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 양수 값을 기준으로 ‘끝 그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)인 경우 ‘grid-row-start: <양수> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start: <양수> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(3) grid-row-end: <그리드 라인 음수 번호>
그리드 컨테이너 내 행 방향으로 나열된 ‘마지막 그리드 트랙’의 아래쪽 그리드 라인부터 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘끝 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘첫 번째 그리드 트랙’의 위쪽 그리드 라인의 번호를 넘어서는 음수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 음수 값을 기준으로 ‘끝 그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)인 경우 ‘grid-row-start: <음수> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start: <음수> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(4) grid-row-end: <그리드 라인 이름>
그리드 라인의 번호 대신 grid-template-rows 속성에서 설정한 그리드 라인 이름을 기준으로 그리드 항목의 ‘시작 그리드 라인’이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)인 경우 ‘grid-row-start: <이름> 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start: <이름> 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(5) grid-row-end: span <그리드 라인 번호 양수 값 또는 이름>
span 키워드 뒤에 양수 값을 작성하면 grid-row-start의 속성값에 상대적인 그리드 영역이 설정된다. grid-row-start 속성값이 auto(기본값)면 행 방향의 현재 ‘끝 그리드 라인’부터 현재 끝 그리드 라인 번호에 양수 값을 뺀 그리드 라인 번호까지 그리드 영역이 설정되고, grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이지만 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되지 않는다. 그리고 grid-row-start 속성값이 양수 또는 음수 또는 이름값이면 grid-row-start 속성으로 지정된 ‘시작 그리드 라인’부터 시작 그리드 라인 번호에서 양수 값을 더한 그리드 라인 번호까지 그리드 영역이 설정되고, grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)인 경우 ‘grid-row-end 속성이 적용된 그리드 항목’은 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-end 속성이 적용된 그리드 항목’ 좌우로 나열된다.

5. 코드 예시

※ 그리드 컨테이너 속성
grid-template-columns: [col1-st] 1fr [col1-en col2-st] 1fr [col2-en col3-st] 1fr [col3-en];
grid-template-rows: [row1-li] 1fr [row2-li] 1fr [row3-li] 1fr [row4-li];
※ 그리드 레이아웃은 3행 3열이고, 그리드 항목은 6개이다.

(1) grid-row-end: auto

bbb

ccccc

ddd

eeee

기본값이다.

(2) grid-row-end: 2

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-end 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(3) grid-row-end: row4-li

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정되고, 세 번째 그리드 라인부터 네 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-end 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(4) grid-row-end: span 2

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인부터 네 번째 그리드 라인 번호에 2를 뺀 두 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이지만 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되지 않는다.

(5) grid-row-start 3:, grid-row-end: span 2

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 세 번째 그리드 라인부터 세 번째 그리드 라인 번호에 2를 더한 다섯 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-end 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(6) grid-row-end: -1

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 그리드 라인 번호가 -1인 네 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정된다. 그리고 grid-column-start 속성과 grid-column-end 속성의 속성값이 auto(기본값)이기 때문에 HTML Normal Flow를 따라 흐르지 않고 열 방향으로 나열된 그리드 라인 중 왼쪽 첫 번째 그리드 라인에 밀착되고, 그 외 그리드 항목은 HTML Normal Flow를 따라 흐르되 ‘grid-row-start 속성이 적용된 그리드 항목’ 좌우로 나열된다.

(7) 두 번째 그리드 항목부터 다섯 번째 그리드 항목까지 같은 grid-row-end: 2를 적용했을 때

bbb

ccccc

ddd

eeee

행 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정된다. 3행 3열 그리드의 1행에 네 가지 그리드 항목이 나열되기 위해 암시적인 그리드 트랙 1열이 추가된다. 그리드 컨테이너에 암시적인 그리드 트랙이 추가되면 암시적인 그리드 트랙의 최소 크기가 콘텐츠의 크기로 설정되고, 암시적인 그리드 트랙의 크기만큼 명시적인 그리드 트랙의 크기가 일정 비율로 줄어든다.

○ grid-column

1. 정의

그리드 컨테이너 내 열 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정한다. grid-column-start 속성과 grid-column-end 속성의 단축 구문으로 grid-template-columns 속성이 적용된 상태에서만 정상적으로 작동한다.

2. 코드 사용

grid-column: auto;
grid-column: <number>;
grid-column: <line-name>;
grid-column: <grid-row-start> / <grid-row-end>
grid-column: auto / auto;
gird-column: <number> / <number>;
grid-column: <line-name> / <line-name>;
gird-column: span <number>;
grid-column: span <line-name>;
grid-column: <number> <line-name> span;
grid-column: <number> <line-name> span / <number> <line-name> span;

grid-column 속성값에 <양수> / <음수>, <음수> / <이름> 등 서로 다른 속성값을 작성해도 되지만, span은 둘 중하나에만 작성해야 한다. (참고: <line-name>과 <number> 조합은 사용 조건이 까다롭고 이해하기가 어려워서 제외했다)

3. 호환성

4. 속성

(1) grid-column: auto;
기본값이다.

(2) grid-column: <시작 그리드 라인 양수> / <끝 그리드 라인 양수>
그리드 컨테이너 내 열 방향으로 나열된 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인부터 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인의 번호를 넘어서는 양수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 양수 값을 기준으로 ‘그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column: <양수> / <양수>가 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column: <양수> / <양수>가 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-: <양수> / <양수>가 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-: <양수> / <양수>가 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(3) grid-column: <시작 그리드 라인 음수> / <끝 그리드 라인 음수>
그리드 컨테이너 내 열 방향으로 나열된 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인부터 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인의 번호를 넘어서는 음수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 음수 값을 기준으로 ‘그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column: <음수> / <음수>가 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column: <음수> / <음수>가 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column: <음수> / <음수>가 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column: <음수> / <음수>가 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(4) grid-column: <시작 그리드 라인 이름> / <끝 그리드 라인 이름>
그리드 라인의 번호 대신 grid-template-columns 속성에서 설정한 그리드 라인 이름을 기준으로 그리드 항목의 ‘시작 그리드 라인’과 ‘끝 그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column: <이름> / <이름>이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column: <이름> / <이름>이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column: <이름> / <이름>이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column: <이름> / <이름>이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(5) grid-column: span <시작 그리드 라인 번호 양수 값 또는 이름> / <끝 그리드 라인>
span 키워드 뒤에 양수 값을 작성하면 grid-column-end의 속성값에 상대적인 그리드 영역이 설정된다. grid-column-end 속성값이 auto(기본값)이면 열 방향의 현재 ‘시작 그리드 라인’부터 현재 시작 그리드 라인 번호에 양수 값을 더한 그리드 라인 번호까지 그리드 영역이 설정된다. 그리고 grid-column-end 속성이 양수 또는 음수 또는 이름값이면 grid-column-end 속성으로 지정된 ‘끝 그리드 라인’부터 끝 그리드 라인 번호에서 양수 값을 뺀 그리드 라인 번호까지 그리드 영역이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

○ grid-column-start

1. 정의

그리드 컨테이너 내 열 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘시작 그리드 라인’을 설정한다. grid-template-columns 속성이 적용된 상태에서만 정상적으로 작동한다.

2. 코드 사용

grid-column-start: auto;
grid-column-start: <number>;
grid-column-start: <line-name>;
grid-column-start: <number> <line-name>;
grid-column-start: span <number>;
grid-column-start: span <line-name>;
grid-column-start: <number> <line-name> span;

– <number>: 양수 또는 음수이다.
– <line-name>: grid-template-columns 속성에서 설정한 그리드 라인 이름이다.

3. 호환성

4. 속성

(1) grid-column-start: auto
기본값이다.

(2) grid-column-start: <그리드 라인 양수 번호>
그리드 컨테이너 내 열 방향으로 나열된 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인부터 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘시작 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인의 번호를 넘어서는 양수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 양수 값을 기준으로 ‘시작 그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start: <양수>가 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start: <양수>가 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start: <양수>가 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start: <양수>가 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(3) grid-column-start: <그리드 라인 음수 번호>
그리드 컨테이너 내 열 방향으로 나열된 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인부터 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘시작 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인의 번호를 넘어서는 음수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 음수 값을 기준으로 ‘시작 그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start: <음수>가 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start: <음수>가 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start: <음수>가 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start: <음수>가 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(4) grid-column-start: <그리드 라인 이름>
그리드 라인의 번호 대신 grid-template-columns 속성에서 설정한 그리드 라인 이름을 기준으로 그리드 항목의 ‘시작 그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start: <이름>이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start: <이름>이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start: <이름>이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start: <이름>이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(5) grid-column-start: span <그리드 라인 번호 양수 값 또는 이름>
span 키워드 뒤에 양수 값을 작성하면 grid-column-end의 속성값에 상대적인 그리드 영역이 설정된다. grid-column-end 속성값이 auto(기본값)이면 열 방향의 현재 ‘시작 그리드 라인’부터 현재 시작 그리드 라인 번호에 양수 값을 더한 그리드 라인 번호까지 그리드 영역이 설정된다. 그리고 grid-column-end 속성이 양수 또는 음수 또는 이름값이면 grid-column-end 속성으로 지정된 ‘끝 그리드 라인’부터 끝 그리드 라인 번호에서 양수 값을 뺀 그리드 라인 번호까지 그리드 영역이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

5. 코드 예시

※ 그리드 컨테이너 속성
grid-template-columns: [col1-st] 1fr [col1-en col2-st] 1fr [col2-en col3-st] 1fr [col3-en];
grid-template-rows: [row1-li] 1fr [row2-li] 1fr [row3-li] 1fr [row4-li];
※ 그리드 레이아웃은 3행 3열이고, 그리드 항목은 6개이다.

(1) grid-column-start: auto

bbb

ccccc

ddd

eeee

기본값이다.

(2) grid-column-start: 3

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 세 번째 그리드 라인이 ‘시작 그리드 라인’으로 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(3) grid-column-start: col3-en

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인을 ‘시작 그리드 라인’으로 설정하기 위해 암시적인 그리드 트랙 1열이 추가되고, 열 방향으로 나열된 네 번째 그리드 라인부터 다섯 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(4) grid-column-start: col3-en, grid-column-end: 2

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인이 ‘시작 그리드 라인’으로 설정되고, 두 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정되어 두 번째 그리드 라인부터 네 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(5) grid-column-start: span 2

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인부터 두 번째 그리드 라인 번호에 2를 더한 네 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(6) grid-column-start: span 2, grid-column-end: 4

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인부터 네 번째 그리드 라인 번호에 2를 뺀 두 번째 그리드 라인까지 그리드 영영이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(7) grid-column-start: -1

bbb

ccccc

ddd

eeee

(8) grid-column-start: -4

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인이 ‘시작 그리드 라인’으로 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-start 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-start 속성값에 따라 시작 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-start 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-start 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-start 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(9) 두 번째 그리드 항목부터 다섯 번째 그리드 항목까지 같은 grid-column-start: 3를 적용했을 때

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 세 번째 그리드 라인이 ‘시작 그리드 라인’으로 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 두 번째 그리드 항목부터 다섯 번째 그리드 항목 각각이 ‘열 방향으로 나열된 그리드 라인’ 중 세 번째 그리드 라인에 배치되기 위해 암시적인 그리드 트랙 2행 추가되어 3행 3열이 5행 3열로 변경된다. 그리드 컨테이너에 암시적인 그리드 트랙이 추가되면 암시적인 그리드 트랙의 최소 크기가 콘텐츠의 크기로 설정되고, 암시적인 그리드 트랙의 크기만큼 명시적인 그리드 트랙의 크기가 일정 비율로 줄어든다.

○ grid-column-end

1. 정의

그리드 컨테이너 내 열 방향으로 나열된 그리드 라인 중에서 그리드 항목의 ‘끝 그리드 라인’을 설정한다. grid-template-columns 속성이 적용된 상태에서만 정상적으로 작동한다.

2. 코드 사용

grid-column-end: auto;
grid-column-end: <number>;
grid-column-end: <line-name>;
grid-column-end: <number> <line-name>;
grid-column-end: span <number>;
grid-column-end: span <line-name>;
grid-column-end: <number> <line-name> span;

– <number>: 양수 또는 음수이다.
– <line-name>: grid-template-columns 속성에서 설정한 그리드 라인 이름이다.

3. 호환성

4. 속성

(1) grid-column-end: auto
기본값이다.

(2) grid-column-end: <그리드 라인 양수 번호>
그리드 컨테이너 내 열 방향으로 나열된 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인부터 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘끝 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인의 번호를 넘어서는 양수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 양수 값을 기준으로 ‘끝 그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 끝 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end: <양수>가 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end: <양수>가 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end: <양수>가 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end: <양수>가 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(3) grid-column-end: <그리드 라인 음수 번호>
그리드 컨테이너 내 열 방향으로 나열된 ‘마지막 그리드 트랙’의 오른쪽 그리드 라인부터 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인까지 차례대로 매겨진 그리드 라인 번호 중에서 그리드 항목의 ‘끝 그리드 라인’이 설정된다. 그리고 그리드 항목에 ‘첫 번째 그리드 트랙’의 왼쪽 그리드 라인의 번호를 넘어서는 음수 값이 적용될 경우 그리드 알고리즘에 의해 그리드 컨테이너 내에서 암시적인 그리드 트랙이 필요한 만큼 형성되고, 그리드 항목에 적용된 음수 값을 기준으로 ‘끝 그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 끝 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end: <음수>가 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end: <음수>가 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end: <음수>가 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end: <음수>가 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(4) grid-column-end: <그리드 라인 이름>
그리드 라인의 번호 대신 grid-template-columns 속성에서 설정한 그리드 라인 이름을 기준으로 그리드 항목의 ‘끝 그리드 라인’이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 끝 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end: <이름>이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end: <이름>이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end: <이름>이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end: <이름>이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(5) grid-column-end: span <그리드 라인 번호 양수 값 또는 이름>
span 키워드 뒤에 양수 값을 작성하면 grid-column-start의 속성값에 상대적인 그리드 영역이 설정된다. grid-column-start 속성값이 auto(기본값)이면 열 방향의 현재 ‘끝 그리드 라인’부터 현재 끝 그리드 라인 번호에 양수 값을 뺀 그리드 라인 번호까지 그리드 영역이 설정된다. 그리고 grid-column-start 속성이 양수 또는 음수 또는 이름값이면 grid-column-start 속성으로 지정된 ‘시작 그리드 라인’부터 시작 그리드 라인 번호에서 양수 값을 더한 그리드 라인 번호까지 그리드 영역이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 끝 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

5. 코드 예시

※ 그리드 컨테이너 속성
grid-template-columns: [col1-st] 1fr [col1-en col2-st] 1fr [col2-en col3-st] 1fr [col3-en];
grid-template-rows: [row1-li] 1fr [row2-li] 1fr [row3-li] 1fr [row4-li];
※ 그리드 레이아웃은 3행 3열이고, 그리드 항목은 6개이다.

(1) grid-column-end: auto

bbb

ccccc

ddd

eeee

기본값이다.

(2) grid-column-end: 2

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(3) grid-column-end: col3-en

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인을 ‘끝 그리드 라인’으로 설정되고, 세 번째 그리드 라인부터 네 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(4) grid-column-end: span 2

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 네 번째 그리드 라인부터 네 번째 그리드 라인 번호에 2를 뺀 두 번째 그리드 라인까지 그리드 영역이 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(5) grid-column-start: 3, grid-column-end: span 2

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 세 번째 그리드 라인부터 세 번째 그리드 라인 번호에 2를 더한 다섯 번째 그리드 라인까지 그리드 영영이 설정되기 위해 암시적인 그리드 트랙 1열이 추가된다. 그리드 컨테이너에 암시적인 그리드 트랙이 추가되면 암시적인 그리드 트랙의 최소 크기가 콘텐츠의 크기로 설정되고, 암시적인 그리드 트랙의 크기만큼 명시적인 그리드 트랙의 크기가 일정 비율로 줄어든다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(6) grid-column-end: -1

bbb

ccccc

ddd

eeee

(7) grid-column-end: -4

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 첫 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정되고, 마이너스 다섯 번째 그리드 라인부터 마이너스 네 번째 그리드 라인까지 그리드 영역을 설정하기 위해 3행 3열 그리드의 왼쪽에 암시적인 그리드 트랙 1열이 추가된다. 그리드 컨테이너에 암시적인 그리드 트랙이 추가되면 암시적인 그리드 트랙의 최소 크기가 콘텐츠의 크기로 설정되고, 암시적인 그리드 트랙의 크기만큼 명시적인 그리드 트랙의 크기가 일정 비율로 줄어든다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 그리드 항목이 grid-column-end 속성값에 따라 배치되어야 하는 시작 그리드 라인에 HTML 작성 순서상 앞선 그리드 항목이 위치한 경우 암시적인 그리드 트랙 1행이 추가되고 추가된 행에서 grid-column-end 속성값에 따라 끝 그리드 라인이 설정된다. 이때 앞선 그리드 항목부터 ‘grid-column-end 속성이 적용된 그리드 항목’ 사이는 빈 곳으로 남게 된다. 그리고 HTML 작성 순서상 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 나열된 그리드 항목은 ‘grid-column-end 속성이 적용된 그리드 항목’이 어디에 배치되든 ‘grid-column-end 속성이 적용된 그리드 항목’ 뒤에 순서대로 나열된다.

(8) 두 번째 그리드 항목부터 다섯 번째 그리드 항목까지 같은 grid-column-end: 2를 적용했을 때

bbb

ccccc

ddd

eeee

열 방향으로 나열된 그리드 라인 중 두 번째 그리드 라인이 ‘끝 그리드 라인’으로 설정된다. 그리고 grid-row-start 속성과 grid-row-end 속성의 속성값이 auto(기본값)이기 때문에 두 번째 그리드 항목부터 다섯 번째 그리드 항목 각각이 ‘열 방향으로 나열된 그리드 라인’ 중 첫 번째 그리드 라인에 배치되기 위해 암시적인 그리드 트랙 2행 추가되어 3행 3열이 5행 3열로 변경된다. 그리드 컨테이너에 암시적인 그리드 트랙이 추가되면 암시적인 그리드 트랙의 최소 크기가 콘텐츠의 크기로 설정되고, 암시적인 그리드 트랙의 크기만큼 명시적인 그리드 트랙의 크기가 일정 비율로 줄어든다.

목차

Display Grid

○ 정의

○ 특징

○ 코드 사용

○ 호환성

○ 속성 요약

1. 그리드 셀 속성

2. 그리드 컨테이너 속성

3. 그리드 컨테이너 정렬 속성

○ 용어

1. 그리드 트랙

(1) fr 단위

(2) repeat() 표기법

(3) 명시적인 그리드 트랙과 암시적인 그리드 트랙

(4) minmax() 함수

2. 그리드 라인

3. 그리드 셀

4. 그리드 영역

5. 그리드 간격

○ 그리드 속성 학습

Grid Layout 그리드 셀 속성

○ grid-area

1. 정의

2. 코드 사용

3. 호환성

4. 속성

5. 코드 예시

(1) grid-area: row1-li / col2-st / row3-li / col3-en;

(2) grid-area: row1-li / col2-st / row3-li;

(3) grid-area: row1-li / col2-st;

(4) grid-area: row1-li;

(5) grid-area: sd;

(6) grid-area: mn;

(7) grid-area: hd;

(8) grid-area: sd / ft;

(9) grid-area: ft / sd;

(10) grid-area: hd / 2;

(11) grid-area: hd / ft / sd;

○ grid-row

1. 정의

2. 코드 사용

3. 호환성

4. 속성

○ grid-row-start

1. 정의

2. 코드 사용

3. 호환성

4. 속성

5. 코드 예시

(1) grid-row-start: auto

(2) grid-row-start: 2

(3) grid-row-start: row4-li

(4) grid-row-start: row4-li, grid-row-end: 2

(5) grid-row-start: span 2

(6) grid-row-start: span 2, grid-row-end: 3

(7) grid-row-start: -1

(8) 두 번째 그리드 항목부터 다섯 번째 그리드 항목까지 같은 grid-row-start: 2를 적용했을 때

○ grid-row-end

1. 정의

2. 코드 사용

3. 호환성

4. 속성

5. 코드 예시

(1) grid-row-end: auto

(2) grid-row-end: 2

(3) grid-row-end: row4-li

(4) grid-row-end: span 2

(5) grid-row-start 3:, grid-row-end: span 2

(6) grid-row-end: -1

(7) 두 번째 그리드 항목부터 다섯 번째 그리드 항목까지 같은 grid-row-end: 2를 적용했을 때

○ grid-column

1. 정의

2. 코드 사용

3. 호환성

4. 속성

○ grid-column-start

1. 정의

2. 코드 사용

3. 호환성