그리드 레이아웃 자식 속성 - by. UXKM

2024-07-30

4.5.6. 자식 속성(properties for the children - grid items)

요약 설명
정의된 컨테이너의 자식 요소들은 자동으로 grid items(아이템)로 정의됩니다.
그리드 컨테이너의 자식을 그리드 아이템 이라고 합니다.
grid item을 위한 속성들은 다음과 같습니다.
grid-row-start, grid-row-end, grid-column-start, grid-column-end 속성은 그리드 아이템(item)을 배치하기 위해 그리드 선(line)의 '시작 위치'와 '끝 위치'를 지정합니다.
'숫자'를 지정하거나, '선 이름'을 지정하거나, span 키워드를 사용합니다.
grid-row-start, grid-row-end, grid-column-start, grid-column-end 속성으로 사용하지만, 축약형(shorthands) 방식으로도 사용 가능합니다. grid-row, grid-column, grid-area

float, display: inline-block, display: table-cell, vertical-align및 column-*속성은 그리드 항목에 영향을주지 않습니다.

4.5.6.1. grid 아이템

요약 설명

가벼운 의미로 그리드 아이템은 그리드 컨테이너 내부에 표시되는 플로우 콘텐츠 입니다.
그리드 컨테이너가 포함하는 자식 콘텐츠는 모두 그리드 아이템이 되며, 요소가 아닌 텍스트일 경우 암시적으로 그리드 아이템이 생성됩니다.

그리드 컨테이너 내부에 포함한 자식요소는 그리드 아이템으로 설정됩니다. (자식 요소가 아니면 그리드 아이템이 아닙니다.)
그리드 아이템에 설정된 float 속성은 적용되지 않습니다. 텍스트 콘텐츠를 컨테이너 포함하는 경우에는 암시적으로 그리드 아이템이 됩니다.
그리드 아이템 사이 공백이 사라집니다. 요소가 아닌 텍스트가 자식으로 포함된 경우, 암시적인 그리드 아이템이 됩니다.
하지만 암시적으로 생성된 그리드 아이템은 스타일 규칙을 설정할 수 없습니다. 다만 상속 가능한 스타일은 적용됩니다.
그리드 아이템에 설정된 display 속성은 모두 무시됩니다.

grid-item 예제

4.5.6.2. grid 라인(line) 기반 아이템 배치

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

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

grid-column-start / grid-column-end / grid-row-start / grid-row-end

그리드 아이템(item)의 열 시작 위치 지정 / 열 끝 위치 지정 / 행 시작 위치 지정 / 행 끝 위치 지정합니다.

									.item {
										grid-column-start: [number] | [name] | span [number] | span [name] | auto;
										grid-column-end: [number] | [name] | span [number] | span [name] | auto;
										grid-row-start: [number] | [name] | span [number] | span [name] | auto;
										grid-row-end: [number] | [name] | span [number] | span [name] | auto;
									}

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

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

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

아이템 요소에 span 설정(상대적 범위 추가)을 사용한 레이아웃

									.item-b {
										grid-column-start: 1; // first와 동일
										grid-column-end: span col4-start;
										grid-row-start: 2; // row1-end와 동일
										grid-row-end: span 2;
									}

grid-column / grid-row

그리드 아이템 행/열, 시작/끝 배치 설정을 속기형으로 설정할 수 있습니다.
grid-column-start + grid-column-end 및 grid-row-start + grid-row-end의 단축 속성(행 시작/끝 위치) / (열 시작/끝 위치)
속기형 속성 값으로 시작점만 설정하고 끝점(<end-line>)을 설정하지 않으면 1개 셀(cell)만큼 사용 됩니다.

									.item {
										grid-column: <start-line> / <end-line> | <start-line> / span <value>;
										grid-row: <start-line> / <end-line> | <start-line> / span <value>;
									}

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

아이템 요소 배치에 속기형 속성을 사용

									.item-c {
										grid-column: 3 / span 2;  // line2 / five와 동일
										grid-row: third-line / 4; // third-line / last-line과 동일
									}

grid 라인(line) 기반 아이템 배치 예제

4.5.6.3. grid 영역(area) 기반 아이템 배치

grid-area

grid-column-start, grid-column-end, grid-row-start, grid-row-end의 단축 속성입니다.
혹은 grid-template-areas가 참조할 영역(area) 이름을 설정할 수도 있습니다.
영역 이름을 설정할 경우 grid-row와 grid-column 개념은 무시됩니다.

									.item {
										grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
										grid-area: 영역이름;
									}

<name> : grid-template-areas에 등록된 참조 이름
<row-start> / <column-start> / <row-end> / <column-end> : 그리드라인 번호 또는 참조 이름

아래 코드의 아이템(.item)은 모두 같은 의미입니다.

									.item {
										grid-row: 2 / 3;
										grid-column: span 2 / -1;
									}

									.item {
										/* '시작 / 시작 / 끝 / 끝'임에 주의해야합니다. */
										grid-area: 2 / span 2 / 3 / -1;
									}

다음과 같이 영역 이름을 지정해 grid-template-areas에서 참조할 수 있습니다.

									<style>
										.container {
											display: grid;
											grid-template-rows: repeat(4, 90px);
											grid-template-columns: repeat(3, 1fr);
											grid-template-areas:
												"header header header"
												"main main aside"
												"main main ."
												"footer footer footer";
										}
										header.item { grid-area: header; }
										main.item { grid-area: main; }
										aside.item { grid-area: aside; }
										footer.item { grid-area: footer; }
									</style>

									<div class="container">
										<header class="item">HEADER</header>
										<main class="item">MAIN</main>
										<aside class="item">ASIDE</aside>
										<footer class="item">FOOTER</footer>
									</div>

grid-area 속성 값으로 grid-template-areas에 사용된 참조 이름을 사용

									.item-d {
										grid-area: header;
									}
									/* grid-row-start / grid-column-start / grid-row-end / grid-column-end 순으로 속성 값을 설정 */

									.item-d {
										grid-area: 1 / col4-start / last-line / 6;
									}
									/* row1-start / col4-start / last-line / end 와 동일 */

4.5.6.4. grid 아이템(item) 순서 정렬

order

플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다.
단, 순서를 변경해도 접근성에 문제가 발생하지 않는 경우에만 사용해야 합니다.

기본값은 0이며, 숫자가 작을수록 앞쪽에 클수록 뒤쪽에 배치되고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다.
만약 item 요소 중 단 한 개의 요소에 order: 1을 지정한다면 기본값인 0보다 크기에 맨 끝에 위치하게 됩니다.
첫 번째 item 요소를 제외한 나머지 요소 중 하나를 첫 번째에 위치시킬 경우 -1을 지정해야 합니다.

									.item:nth-child(n) {
										order: <Number> or -<Number>;
									}

order 속성을 사용하여 배치 순서를 지정

									.container {
										display: grid;
										grid-template-columns: repeat(3, 1fr);
										grid-template-rows: repeat(2, minmax(50px, auto));
									}

									/* 그리드 아이템 순서 설정 (자동 배치 내) */
									.item1 { order: 2; }
									.item2 { order: 3; }
									.item3 { order: 1; }

order 예제

z-index

그리드 아이템의 쌓이는 순서를 지정할 수 있습니다.

									.item1 {
										grid-area: 1 / 1 / 2 / 3;
									}

									.item2 {
										grid-area: 1 / 2 / 3 / 3;
										z-index: 1;
									}

									.item3 {
										grid-area: 2 / 2 / 3 / 4;
									}

z-index 예제

4.5.6.5. grid 개별 아이템(self) 정렬

align-self

단일 그리드 아이템을 수직(열 축) 정렬합니다.
열 축을 따라 그리드 아이템 내부 콘텐츠를 정렬합니다. (열 축에 따라 정렬하는 justify-self 속성과는 반대)

start : 그리드 아이템 영역 열 축 시작점(위쪽)에 콘텐츠를 정렬

.item-a { align-self: start; }
center : 그리드 아이템 영역 열 축 중앙에 콘텐츠를 정렬(수직 가운데 정렬)

.item-a { align-self: center; }
end : 그리드 아이템 영역 행 축 끝점(아래쪽)에 콘텐츠를 정렬

.item-a { align-self: end; }
stretch : 그리드 아이템 영역을 열 축에 가득 채움(열 축을 채우기 위해 그리드 아이템을 늘림)

.item-a { align-self: stretch; }

justify-self

단일 그리드 아이템을 수평(행 축) 정렬합니다.
행 축을 따라 그리드 아이템 내부 콘텐츠를 정렬합니다. (열 축에 따라 정렬하는 align-self 속성과는 반대)
모든 항목에 대한 정렬을 설정하려면 justify-items 속성을 통해 컨테이너에서 설정합니다.

start : 그리드 아이템 영역 행 축 시작점시작점(왼쪽)에 콘텐츠를 정렬

.item-a { justify-self: start; }
center : 그리드 아이템 영역 행 축 중앙에 콘텐츠를 정렬(수평 가운데 정렬)

.item-a { justify-self: center; }
end : 그리드 아이템 영역 행 축 끝점(오른쪽)에 콘텐츠를 정렬

.item-a { justify-self: end; }
stretch : 그리드 아이템 영역을 행 축에 가득 채움(행 축을 채우기 위해 그리드 아이템을 늘림)

.item-a { justify-self: stretch; }

place-self

<align-self> / <justify-self>의 단축 속성입니다.

auto : 레이아웃 모드의 "기본" 정렬입니다.
<align-self> / <justify-self> : 적용 시 첫 번째 값이 align-self고 두 번째 값이 justify-self입니다. 두 번째 값을 생략하면 첫 번째 값이 두 속성에 모두 할당됩니다.

키워드 값(Keyword values)

									.item {
										place-self: auto center;
										place-self: normal start;
									}

위치 정렬(positional alignment)

									.item {
										place-self: center normal;
										place-self: start auto;
										place-self: end normal;
										place-self: self-start auto;
										place-self: self-end normal;
										place-self: flex-start auto;
										place-self: flex-end normal;
										place-self: left auto;
										place-self: right normal;
									}

기준선 정렬(baseline alignment)

									.item {
										place-self: baseline normal;
										place-self: first baseline auto;
										place-self: last baseline normal;
										place-self: stretch auto;
									}

item-a {place-self: center;} — `.item-a { place-self: center; }`