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

Publishing
CSS
CSS 고급
그리드 레이아웃 자식 속성

요약 설명
CSS Grid는 웹 페이지 컨텐츠를 행과 열로 나눌 수 있는 2차원 레이아웃 시스템입니다.
display: grid 또는 display: inline-grid로 설정한 요소가 그리드 컨테이너가 되며, 그 안에 포함된 자식 요소들이 그리드 아이템이 됩니다.

flex는 1차원 레이아웃(행 또는 열)을 다루지만, grid는 2차원 레이아웃(행과 열)을 다룹니다.
복잡한 레이아웃을 구현하는 데 유용하며, 브라우저 대부분이 완벽하게 지원하고 있습니다.

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

요약 설명
지정된 컨테이너의 자식 요소들은 자동으로 grid items(아이템)가 됩니다.
grid item을 배치하기 위한 속성으로는 grid-row-start, grid-row-end, grid-column-start, grid-column-end가 있습니다.
이 속성들은 그리드 선(line)의 '시작 위치'와 '끝 위치'를 지정하며, '숫자', '선 이름', 또는 span 키워드를 사용할 수 있습니다.
또한 축약형(shorthands) 속성인 grid-row, grid-column, grid-area를 사용할 수도 있습니다.

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

grid 아이템

요약 설명

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

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

grid-item 예제

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) 기반 아이템 배치 예제

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 와 동일 */

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 예제

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; }`