Grid Layout
Grid Layout은 Flex Box처럼 컨테이너 내부 요소를 정렬하기 위해 사용합니다.
Flex Box는 1차원, 즉 한 라인에서의 요소를 정렬합니다. 만약 flex-wrap 속성값을 wrap으로 적용한 경우 여러 라인을 갖는 Flex Box가 되지만 이때도 각 라인별로 요소를 정렬합니다.
Grid Layout은 Flex Box와는 다르게 2차원, 즉 행과 열로 생성된 template 내 요소를 정렬하기 위해 사용됩니다. table과 유사한 레이아웃 정렬을 의미합니다.
Grid Container에는 rows, columns, gutters(gap)로 구성됩G니다. rows는 행, columns은 열, gutters는 행 사이, 열과 열 사이 공백을 의미합니다.
Grid Container
아래 작성된 속성들은 모두 Grid Container에 작성되는 속성입니다.
1. Grid Container 선언(grid, inline-grid)
Flex Box처럼 정렬할 요소의 부모 요소에 Gird Container로 선언하기 위해서 display: grid | inline-grid;를 작성해줍니다.
grid 값은 flex처럼 외부 레이아웃은 block 특성을 갖고, 내부 레이아웃은 gird 특성을 갖도록 하는 속성값입니다.
즉, container에 width 값 명시하지 않은 경우 100% 값으로 동작하고 명시한 경우에는 남은 가로 너비를 margin으로 채우게 됩니다.
이는 부모 요소의 content 가로 영역을 단독으로 사용합니다.
inline-grid 값은 inline-flex처럼 외부 레이아웃은 inline-block 특성을 갖고, 내부 레이아웃은 gird 특성을 갖도록 하는 속성값입니다.
즉, container에 width 값 명시하지 않은 경우에는 content 영역만큼 너비를 갖게되며 명시적으로 width 값으로 가로 너비를 지정할 수도 있습니다. 이는 inline-block 특성과 가깝습니다.
2. 행과 열 설정
gird layout은 2차원, 즉 행과 열로 구성된 레이아웃입니다. 이때 몇 개의 행과 열을 설정하기 위한 속성으로 grid-template-rows, grid-template-columns를 사용합니다.
| 값 | 의미 | 기본값 |
|---|---|---|
| none | none | |
| px, em, rem | ||
| % | grid container의 가로, 세로 너비 백분율 | |
| fr | grid container의 가로, 세로 너비 비율 | |
| repeat(반복횟수, 너비) | 첫 번째 인수로 반복될 횟수를 정수로 전달, 두 번째 인수로 지정할 너비 전달 | |
| minmax(min, max) | 첫 번째 인수로는 최소 너비, 두 번째 인수는 최대 너비 전달 | |
| min-content | 포함된 콘텐츠 중 가장 짧은 콘텐츠를 너비로 사용 | |
| min-content | 포함된 콘텐츠를 가장 길게 사용될 때의 너비를 사용 |
1. fr 단위
grid-template-rows, grid-template-columns의 속성값으로 fr이라는 단위를 사용할 수 있습니다. "fr 단위"는 Grid Container의 가로, 세로의 너비 비율을 의미합니다.
2. repeat(num, length)
만약 작성된 값이 연속적으로 동일한 경우에는 "repeat()" 함수를 속성값으로 사용할 수도 있습니다. 이때 첫 번째 인수로는 연속되는 개수, 두 번째 인수는 지정할 너비를 작성합니다.
repeat 함수의 첫 번째 인수로 전달될 반복 횟수 값을 숫자가 아닌 "auto-fill", "auto-fit" 값을 전달할 수 있습니다.
-
"auto-fill" 값은 grid container의 너비에 따라 template의 행이나 열이 생성될 충분한 공간이 존재하는 경우 행이나 열을 자동 생성하도록 합니다.
즉, grid container가 허용하는 너비만큼 행이나 열을 언제나 자동적으로 생성합니다. 이는 주축 방향으로 한 줄로 배치가 된 경우에도 행이나 열을 자동적으로 생성하게 됩니다. -
"auto-fit" 값은 auto-fill와 유사하게 동작하지만 auto-fill의 경우 아이템들을 모두 한 줄에 배치가 되더라도 공간이 남는다면 추가적으로 셀을 생성하게 됩니다.
auto-fill의 경우에는 모든 아이템들이 주축 방향으로 한 줄에 배치가 완료된 경우에는 더이상 새로운 셀을 자동적으로 생성하지 않습니다.
3. minmax(min, max)
"minmax()" 함수는 가질 수 있는 최소 너비와 최대 너비를 작성할 수 있습니다. 이는 행이나 열의 너비가 상대적인 경우 변경가능한 최소 너비와 최대 너비 제한을 둘 수 있습니다.
첫 번째 인수로 최소값, 두 번째 인수로 최대값을 전달해줍니다.
4. min-content
"min-content 속성값"은 아이템이 포함하고 있는 콘텐츠를 나눌 수 있는 가장 작은 단위로 나누었을 때, 가장 긴 콘텐츠의 너비를 사용합니다.
-
만약 아이템이 영문 텍스트를 콘텐츠로 갖고 있는 경우 영문 텍스트는
word-break속성값이 keep-all 처럼 동작하기 때문에 단어 기준으로 콘텐츠를 분리할 수 있습니다. 이때 각 단어중 가장 긴 단어를 너비로서 사용하게 됩니다. -
한, 중, 일 텍스트를 콘텐츠로서 포함하고 있는 경우에는
work-break속성이 break-all로 동작하기 때문에 문자 단위로 콘텐츠를 구분할 수 있으며, 한 문자의 너비를 사용하게 됩니다.
위 그림은 grid-template-columns: repeat(3, min-content);로 사용한 결과입니다. 영문 텍스트를 콘텐츠로 포함하고 있는 경우 가장 긴 단어를 열의 너비로 사용하고 한, 중, 일 텍스트의 경우에는 한 문자를 열의 너비로서 사용하고 있습니다.
5. max-content
"max-content" 값은 포함된 콘텐츠를 가장 길게 사용할 때의 너비를 사용하게 됩니다.
위 그림은 grid-template-columns: repeat(3, max-content);로 작성한 결과입니다. 이처럼 포함된 콘텐츠를 가장 길게 사용할 때의 너비를 열의 너비로서 사용하고 있습니다.
2-1. 열 설정(grid-template-columns)
grid-template-columns 속성은 grid container가 몇 개의 열을 갖게 될 것인지, 각 열의 가로 너비를 설정하는 속성입니다.
container {
display: grid;
/* 100px 가로 너비를 갖는 3개의 열 생성 */
gird-template-columns: 100px 100px 100px;
}위 코드처럼 작성시 Grid Container는 3개의 열을 갖게 되며, 각 열은 100px씩 갖는 3개의 열을 생성하게 됩니다.
즉, 공백으로 구분하여 각 열의 너비를 작성하고, 작성된 값의 개수가 바로 열의 개수가 됩니다. 이때 작성된 순서대로 열의 너비가 적용됩니다.
위 그림은 부모 요소에 display: grid; width: 500px; height: 500px; grid-template-columns: 100px 100px 100px;을 적용한 결과입니다.
위 그림처럼 Grid Container는 3개의 열을 갖게 되고, 각 열은 순차적으로 100px씩 갖도록 생성되었습니다.
추가적으로 Gird Container의 item에 가로 너비(width)를 명시하지 않은 경우에는 열의 가로 너비 전체를 차지하게 됩니다.
이는 justify-items 속성값의 기본값이 stretch이므로 셀 주축 방향의 너비를 전체 차지하게 됩니다.
위 그림은 grid-template-columns: 1fr 1fr 1fr;로 작성한 결과입니다.
Grid Container의 가로 너비가 500px이며, 이를 각각 1/3의 너비를 갖는 3개의 열을 생성한 그림입니다.
이처럼 fr이라는 단위값을 사용하는 경우 Grid Container의 너비 비율에 맞게 설정할 수도 있습니다.
위 결과에서 grid-template-columns: 1fr 1fr 1fr;을 적는 대신 grid-template-columns: repeat(3, 1fr);을 속성값으로 작성하여도 동일한 결과가 나타납니다.
즉, repeat 함수를 통해 첫 번째 인수로는 연속되는 열 혹은 행의 개수를 숫자로 작성하고, 두 번째 인수로는 열 혹은 행의 너비를 작성할 수 있습니다.
2-2. 행 설정(grid-template-rows)
grid-template-rows 속성은 grid container가 몇 개의 행을 갖게 될 것인지, 각 행의 너비를 설정하는 속성입니다.
container {
display: grid;
grid-template-columns: 100px 100px 100px;
/* 200px을 갖는 2개의 행 생성 */
grid-template-rows: 200px 200px;
}위 코드처럼 작성시 Grid Container는 3개의 열과 2개의 행을 갖게 되며, 각 열은 100px씩 행은 200px씩 갖도록 생성됩니다.
즉, 공백으로 구분하여 각 행의 너비를 작성하고, 작성된 값의 개수가 바로 행의 개수가 됩니다. 이때 작성된 순서대로 행의 너비가 적용됩니다.
위 그림은 부모 요소에 display: grid; width: 500px; height: 500px; grid-template-columns: 100px 100px 100px; grid-template-rows: 200px 200px;을 적용한 결과입니다.
위 그림처럼 Grid Container는 3개의 열과 2개의 행을 갖게 되고, 각 열을 100px씩 각 행은 200px씩 갖도록 생성되었습니다.
그리고 Grid Container의 item에 세로 너비(height)를 작성하지 않은 경우에는 행의 세로 너비 전체를 차지하게 됩니다.
이는 align-items 속성값이 stretch로 셀 교차축 방향으로 너비가 꽉 차게 됩니다.
위 그림은 부모 요소에 gird-template-rows: 1fr 1fr 1fr 1fr 1fr;를 적용한 결과입니다.
Grid Container는 500px의 가로 너비를 갖고 있으며, 이를 각각 1/3의 너비를 갖는 3개의 행을 생성한 결과입니다.
이때 grid-template-rows: 1fr 1fr 1fr 1fr 1fr;을 작성하는 대식에 grid-template-rows: repeat(5, 1fr);로 작성할 수 있습니다. 둘 다 동일한 결과가 나타납니다.
2-3. 암묵적인 행 설정(grid-auto-rows)
grid-template-rows와 grid-template-columns 속성은 명시적으로 행과 열을 설정합니다.
이때 명시적으로 지정한 행과 열에서 넘쳐 흐르는 요소들의 행 너비를 설정하는 속성이 바로 grid-auto-rows입니다. 사용 방법은 grid-template-rows와 grid-template-columns 속성과 동일합니다.
즉, 명시적이 아닌 암시적인 행의 너비를 설정하는 속성입니다.
위 그림은 2행 2열의 grid container입니다. child5, child6, child7은 명시적으로 지정한 2행 2열 template에 들어가지 못해 위 그림처럼 넘처 흐르는 요소의 세로 너비가 자신의 content만큼 갖게 됩니다.
이때 grid-auto-rows 속성을 통해 해당 요소들의 세로 너비를 지정할 수 있습니다.
grid-auto-rows 속성값으로 100px 작성시 아래와 같이 넘쳐 흐르는 요소의 행 너비가 100px이 되어 결과가 출력됩니다.
2-4. 암묵적인 열 설정(grid-auto-columns)
마찬가지로 명시적인 template에서 벗어난 item들의 열 너비를 설정하기 위해서 grid-auto-columns 속성을 사용합니다. 사용 방법은 grid-template-rows와 grid-template-columns 속성과 동일합니다.
즉, 암묵적인 열의 너비를 설정하는 속성입니다.
3. Items 배치
Grid Container의 행과 열로 생성된 각 칸을 셀이라고 하며, 기존에는 일정한 크기의 셀에 item들을 배치했습니다.
grid-template-areas 속성을 사용하면 각 셀의 영역에 원하는 item들을 배치할 수 있습니다.
위 그림은 container의 가로와 세로를 각 500px씩 지정하고, display 속성으로 grid 값을 사용했습니다.
grid-template-columns 속성으로 열은 repeat(5,1fr)로 설정하였고, grid-template-rows 속성으로 행은 repeat(3, 1fr)로 설정한 그림입니다.
현재는 행과 열로 생성된 일정한 크기의 각 셀에 각 item가 순서대로 배치되고 있지만, grid-template-areas 속성을 통해 원하는 위치에 원하는 영역에 item들을 배치할 수 있습니다.
3-1. item 이름 설정(grid-area)
item들을 배치하기 전에 선행되어야 할 작업으로 배치될 item들의 이름을 미리 지정해주어야 합니다. 요소의 이름을 지정해주는 속성으로는 grid-area 속성을 사용합니다.
즉, 셀에 배치될 item, 즉 grid conatiner의 item에 grid-area 속성으로 이름을 지정해주어야 합니다.
.header {
grid-area: h;
}
.main {
grid-area: m;
}
.side-bar {
grid-area: s;
}
.footer {
grid-area: f;
]3-2. item 배치(grid-template-areas)
이름을 지정한 뒤 Grid container에 grid-template-areas 속성을 통해 원하는 위치에 item들을 배치할 수 있습니다.
.container {
,,,
grid-template-areas:
"h h h h h"
"m m m s s"
"f f f f f";
}위 코드처럼 앞에서 작성된 이름을 3행 5열 구조로 위와 같이 작성해줍니다.
주의할 점으로 반드시 지정된 행과 열 구조를 지켜 모든 셀에 item의 이름을 작성해야 하며, 배치될 각 셀에 grid-area 속성으로 지정한 이름을 작성해주어야 합니다.
만약 셀 자체를 비워두고 싶은 경우에는 비워두지 말고 .(점)을 작성하여 무조건적으로 행과 열 구조를 지켜 빈 셀 없이 작성해야 합니다.
위 그림과 같이 grid-template-areas 속성으로 작성한 구조에 맞게 셀이 병합되고 원하는 위치에 요소를 배치할 수 있습니다.
.container {
,,,
grid-template-areas:
"h h h h ."
"m m . s s"
". f f f f";
}위 코드처럼 .(점)을 작성하는 경우에는 해당 셀을 빈 셀로 비워 요소가 배치되지 않도록 할 수 있습니다.
4. 행과 열 사이 간격 설정
기본적으로 생성된 Gird Container의 경우 행과 열 사이 공백이 존재하지 않습니다. 만약 행이나 열 사이 간격(gutter, gap)을 생성하고 싶은 경우 row-grap, column-gap 속성을 사용하여 간격을 생성할 수 있습니다.
두 속성 모두 Grid Container에 작성하는 속성입니다.
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | 간격 없음 | normal |
| px, em, rem | ||
| % | grid container의 가로, 세로 너비 백분율 |
gap 단축 속성을 통해 row-gap, column-gap을 한 번에 설정할 수도 있습니다. 값으로는 공백으로 구분하여 작성하며 첫 번째 값은 row-gap, 두 번째 값은 column-gap 속성값이 됩니다.
gap: <row-gap> <column-gap>;3-1. 행 간격 설정(row-gap)
Grid Container에 grid-grap 속성값으로 각 행 사이 간격 너비를 작성해줍니다.
이때 간격은 첫 행과 마지막 행을 제외한 나머지 행 사이에 간격을 추가합니다(space-between과 유사).
아래 그림은 gird container 가로 세로가 각 500px이며, 너비 비율에 맞게 3행 3열을 갖는 container입니다.
만약 row-grap: 30px;을 작성하게 되면 아래와 같은 결과가 출력됩니다.
3-2. 열 간격 설정(column-gap)
row-gap 속성과 사용 방법이 동일합니다. column-gap 속성은 첫 열과 마지막 열을 제외한 나머지 열 사이에 간격을 추가하기 위해 사용합니다.
column-gap: 30px; 작성시 아래와 같은 결과가 출력됩니다.
5. item 정렬 방향 설정(grid-auto-flow)
grid container에서 각 item들은 행과 열로 생성된 template의 좌측 상단 셀부터 오른쪽에서 왼쪽으로 배치됩니다.
이를 변경하기 위해서는 grid-auto-flow 속성을 사용해야 합니다.
| 값 | 의미 | 기본값 |
|---|---|---|
| row | template의 좌측 상단 셀 기준 왼쪽에서 오른쪽으로 item 정렬 | row |
| column | template의 좌측 상단 셀 기준 위에서 아래쪽으로 item 정렬 | |
| row dense | template의 좌측 상단 셀 기준 왼쪽에서 오른쪽으로 item 정렬 정렬되는 방향으로 빈 셀 존재시 뒤에 배치된 item을 배치하여 채움 | |
| column dense | template의 좌측 상단 셀 기준 위에서 아래쪽으로 item 정렬 정렬되는 방향으로 빈 셀 존재시 뒤에 배치된 item을 배치하여 채움 |
기본값은 row로 template의 좌측 상단 셀을 기준으로 왼쪽에서 오른쪽으로 item들이 배치가 됩니다.
column 속성값 사용시 template의 좌측 상단 셀을 기준으로 위에서 아래로 배치가됩니다.
추가적으로 dense라는 값을 공백으로 구분하여 작성할 수 있으며, dense도 추가적으로 작성시 정렬되는 방향으로 빈 셀 존재시 뒤에 존재하는 item을 배치하여 빈 셀이 없도록 배치합니다.
위 그림은 grid-auto-flow: row;인 결과로 좌측 상단을 기준으로 왼쪽에서 오른쪽으로 배치됩니다.
위 그림처럼 특정 셀이 병합되어 item이 배치된 경우 빈 공간이 생기게 됩니다. 이때 grid-auto-flow: row dense;작성시 정렬되는 방향으로 빈 셀들이 존재하는 경우 해당 셀들을 빈틈없이 채워 정렬합니다.
아래와 같은 결과가 출력됩니다.
위 그림처럼 기존에 빈 공간으로 존재했던 셀에 요소가 채워지게 됩니다.
위 그림은 grid-auto-flow: column;인 결과로 좌측 상단 셀을 기준으로 위에서 아래로 item들이 배치됩니다.
6. 주축 방향 각 라인 정렬(justify-content)
grid-auto-flow 속성으로 grid container의 정렬 방향을 설정할 수 있었습니다.
| 값 | 의미 | 기본값 |
|---|---|---|
| start | 주축 시작 지점부터 라인 정렬 | start |
| end | 주축 끝 지점부터 라인 정렬 | |
| center | 주축 중앙에 라인 정렬 | |
| space-between | 시작 지점과 끝 지점에 양 끝 라인 배치 후, 나머지 라인 사이 일정한 공백을 갖도록 배치 | |
| space-around | 각 라인 좌우에 일정한 공백을 갖도록 배치 |
grid-auto-flow: row 속성값인 경우 왼쪽에서 오른쪽으로 주축 방향이며, item들이 오른쪽에서 왼쪽으로 배치됩니다. column 속성값인 경우 위에서 아래가 주축 방향이 되며, item들이 위에서 아래로 배치가 됩니다.
이렇게 설정된 주축 방향으로 각 라인들을 정렬하기 위해 justify-content 속성을 사용합니다. 이때 정렬이되는 것은 각 아이템이 아니라 각 라인의 정렬 방식을 설정합니다.
grid-auto-flow 속성값이 row의 경우 justify-content 속성으로 각 열(column)들을 정렬하게 되고
grid-auto-flow 속성값이 column인 경우에는 각 행(row)들을 정렬하게 됩니다.
참고로 justify-content 속성은 주축 방향으로 grid container가 여백이 갖는 경우에만 적용이 됩니다.
즉, grid container 내 생성된 template의 주축 방향으로 남는 공간이 존재해야 합니다.
위 그림은 grid container의 가로 세로가 각각 500px이고, 행과 열의 너비가 각 100px인 4행 4열인 template을 갖도록 생성하였습니다.
grid-auto-flow는 row로 주축의 방향이 왼쪽에서 오른쪽 방향을 갖습니다.
위 그림처럼 template의 가로 세로 너비는 각 400px이고 container의 가로 세로 너비는 각 500px이되어 template이 더 작은 경우에 justify-content 속성으로 각 라인을 주축 방향으로 정렬을 할 수 있습니다.
아래 그림들은 모두 grid-auto-flow: row;로 설정한 grid container입니다.
justify-content 속성값의 기본값은 start로 아래 그림처럼 주축 시작되는 부분부터 각 라인이 정렬이됩니다.
justify-content 속성값이 end인 경우에는 아래 그림처럼 주축 끝 부분부터 각 라인이 정렬이됩니다.
justify-content 속성값이 center인 경우에는 아래 그림처럼 주축 중앙 부분에 각 라인이 정렬이됩니다.
justify-content 속성값이 space-between인 경우에는 아래 그림처럼 시작 라인과 마지막 라인이 양 끝에 붙고 나머니 라인들은 좌우에 일정한 공백을 갖도록 정렬됩니다.
justify-content 속성값이 space-around인 경우에는 아래 그림처럼 각 라인의 좌우에 일정한 공백을 갖도록 정렬됩니다.
7. 교차축 방향 각 라인 정렬(align-content)
align-content 속성을 통해 grid container의 교차축 방향 각 라인을 정렬할 수 있습니다.
grid-auto-flow 속성값이 row인 경우 각 행들을 교차축 방향으로 정렬하고
grid-auto-flow 속성값이 column인 경우에는 각 열들을 교차축 방향으로 정렬하는 속성입니다.
사용되는 값은 justify-content 속성과 동일합니다.
| 값 | 의미 | 기본값 |
|---|---|---|
| start | 교차축 시작 지점부터 라인 정렬 | start |
| end | 교차축 끝 지점부터 라인 정렬 | |
| center | 교차축 중앙에 라인 정렬 | |
| space-between | 시작 지점과 끝 지점에 양 끝 라인 배치 후, 나머지 라인 사이 일정한 공백을 갖도록 배치 | |
| space-around | 각 라인 좌우에 일정한 공백을 갖도록 배치 |
8. 각 셀의 주축 방향 아이템 정렬(justify-items)
justify-items 속성을 사용하여 각 셀에서의 주축 방향으로 item을 정렬할 수 있습니다.
| 값 | 의미 | 기본값 |
|---|---|---|
| stretch | item이 셀의 주축 방향의 너비를 갖지 않는 경우 주축 방향으로 셀 너비 꽉 채움 | stretch |
| start | item 셀의 주축 방향의 너비 갖지 않는 경우 content 만큼 갖게 됨 item은 셀의 주축 시작 지점에 배치됨 | |
| end | item 셀의 주축 방향의 너비 갖지 않는 경우 content 만큼 갖게 됨 item은 셀의 주축 끝 지점에 배치됨 | |
| center | item 셀의 주축 방향의 너비 갖지 않는 경우 content 만큼 갖게 됨 item은 셀의 주축 중앙 지점에 배치됨 |
justify-items 속성을 사용하기 위해서는 셀 크기보다 아이템의 크기가 더 작아야 적용되는 속성입니다.
위 그림은 grid container의 가로 세로 너비가 각 500px이고, 1fr로 설정된 4행 4열의 template을 생성하였습니다.
이때 아이템들은 가로 세로 너비를 명시하지 않은 상태입니다.
justify-items 속성의 기본값은 stretch로 아이템의 주축 방향 너비값을 명시하지 않은 경우에는 셀의 주축 방향 끝까지 채우게 됩니다.
justify-items 속성값으로 start 작성시 아래와 같은 결과가 나타납니다.
아이템의 주축 방향 너비값을 명시하지 않은 경우에는 자신이 갖고 있는 content 만큼의 너비를 갖게 됩니다.
그리고 각 셀의 주축 시작 부분에 아이템이 정렬됩니다.
justify-items 속성값으로 end 작성시 아래와 같은 결과가 나타납니다.
아이템의 주축 방향 너비값을 명시하지 않은 경우에는 자신이 갖고 있는 content 만큼의 너비를 갖게 됩니다.
그리고 각 셀의 주축 끝 부분에 아이템이 정렬됩니다.
justify-items 속성값으로 center 작성시 아래와 같은 결과가 나타납니다.
아이템의 주축 방향 너비값을 명시하지 않은 경우에는 자신이 갖고 있는 content 만큼의 너비를 갖게 됩니다.
그리고 각 셀의 주축 중앙에 아이템이 정렬됩니다.
9. 각 셀의 교차축 방향 아이템 정렬(align-items)
align-items 속성을 통해 각 셀에서의 교차축 방향으로 item을 정렬할 수 있습니다.
| 값 | 의미 | 기본값 |
|---|---|---|
| stretch | item이 셀의 교차축 방향의 너비를 갖지 않는 경우 교차축 방향으로 셀 너비 꽉 채움 | stretch |
| start | item 셀의 교차축 방향의 너비 갖지 않는 경우 content 만큼 갖게 됨 item은 셀의 교차축 시작 지점에 배치됨 | |
| end | item 셀의 교차축 방향의 너비 갖지 않는 경우 content 만큼 갖게 됨 item은 셀의 교차축 끝 지점에 배치됨 | |
| center | item 셀의 교차축 방향의 너비 갖지 않는 경우 content 만큼 갖게 됨 item은 셀의 교차축 중앙 지점에 배치됨 |
사용되는 값은 justify-items 속성값과 동일합니다.
기본값은 stretch이며 아이템의 교차축 방향 너비를 명시하지 않은 경우 해당 셀의 교차축 방향으로 너비를 끝까지 채우게 됩니다.
stretch 이외 start, end, center와 같은 값 사용시 아이템의 교차축 방향 너비를 명시하지 않은 경우 자신의 content만큼 너비를 갖게 되고, 각 셀에서 교차축 방향으로 아이템을 정렬합니다.
Grid Item
아래 속성들은 모두 Grid Item에게 적용하는 속성들입니다.
1. item 행 방향 위치와 영역 설정(grid-row, grid-row-end, grid-row-start)
행 방향으로 특정 item의 위치와 영역을 설정 위해서 grid-row 단축 속성을 사용합니다.
grid-row 단축 속성은 grid-row-end와 grid-row-start 개별 속성을 /로 구분하여 한 번에 작성할 수 있는 속성입니다.
grid-row: <grid-row-start> / <grid-row-end>;grid-row-start, grid-row-end
grid-row-start 속성은 item 배치가 시작될 행 위치를 작성하고, grid-row-end 속성으로는 item 배치가 끝날 행 위치를 작성합니다.
이때 위치를 작성할 때는 숫자를 작성하는데 이 숫자의 경우 명시적으로 생성된 template에 존재하는 숫자를 의미합니다.
참고로 명시적으로 생성된 template 외부에 암묵적으로 생성된 행과 열에는 음수 숫자값이 생기지 않습니다. 즉, 명시적인 template에서만 음수값이 존재합니다.
위 그림은 4행 4열 template을 갖는 grid container입니다. 이때 template 가장자리에 작성된 숫자값이 바로 위치를 의미하는 숫자값으로 사용됩니다.
만약 첫 번째 아이템에 grid-row-start: 2; grid-row-end: 4;를 작성하게되면 아래와 같은 결과가 표시됩니다.
즉, 아이템이 배치된 위치의 행 부분에서 2 위치에서 시작하고 4 위치에서 끝나도록 설정한 것을 의미합니다. 이는 grid-row-start: -4; grid-row-end: -2;처럼 음수값을 사용하더라도 동일하게 사용할 수 있습니다.
속성값으로 숫자값이 아닌 span <num>을 사용할 수도 있습니다. 이는 연속되는 개수를 작성해줍니다.
만약 첫 번째 아이템에 grid-row-start: 1; grid-row-end: span 3;을 작성하는 경우 아래와 같은 결과가 나타납니다.
시작 행 위치는 1 이며, 연속되는 행의 개수가 3개이므로 4 위치에 존재하게 됩니다.
2. item 열 방향 위치와 영역 설정(grid-column, grid-column-end, grid-row-column)
행 방향으로 item의 위치와 영역 설정 위해서 grid-column 단축 속성을 사용합니다.
grid-column 단축 속성은 grid-column-end와 grid-column-start 개별 속성을 /로 구분하여 한 번에 작성할 수 있는 속성입니다.
grid-column: <grid-column-start> / <grid-column-end>;grid-column-start 속성은 셀의 시작 열 위치를 작성하고, grid-row-end 속성으로는 셀이 끝나는 열 위치를 작성합니다.
사용방법은 grid-row와 동일합니다.
3. 특정 아이템의 이름 설정 & item 행, 열 위치와 영역 설정(grid-area)
특정 아이템의 이름을 설정하기 위해서 grid-area 속성을 사용합니다.
설정한 이름은 grid container에 작성되는 grid-template-areas 속성으로 아이템들을 이름으로 구별하여 원하는 위치에 배치하기 위해 사용합니다.
grid-area: 키워드;grid-area 속성은 이름을 설정하는 역할 뿐만 아니라 단축 속성으로도 사용됩니다.
grid-row-start, grid-column-start, grid-row-end, grid-column-end 개별 속성을 한 번에 설정하는 단축 속성으로도 사용됩니다.
각 속성값들을 /로 구분하여 작성해줍니다.
grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;즉, grid-area 속성값으로 키워드를 작성하는 경우 특정 아이템의 이름으로 사용되고, 숫자값을 사용하는 경우에는 단축 속성으로 사용됩니다.
4. 아이템 순서(order)
배치되는 아이템들의 순서를 order 속성을 사용하여 명시적으로 변경할 수 있습니다.
기본값은 0이며, 정수를 작성하며 음수값을 허용합니다. 작성된 값들을 오름차순으로 배치하게 되며, 동일한 값인 경우에는 html 구조상 나중에 작성된 것이 뒤로 밀리게 됩니다.
5. 아이템 z 축 순서(z-index)
아이템들의 z축 순서를 설정하는 속성으로 z-index 속성을 사용할 수 있습니다.
만약 grid-row와 grid-column 속성을 통해 명시적으로 아이템의 시작과 끝위치를 명시하는 경우 다른 아이템과 셀이 겹칠 수 있습니다.
위 그림처럼 각 아이템을 grid-row, grid-column 속성으로 명시적으로 위치시키는 경우에는 셀이 서로 겹치게 됩니다.
이때 아이템들이 쌓이는 순서를 z-index 속성으로 설정할 수 있습니다.
z-index 속성의 초기값은 0이므로 구조상 늦게 작성된 아이템이 가장 위에 쌓이게 되며, 명시적으로 값을 작성하는 경우에는 큰 값이 가장 위에 쌓이게 됩니다.
