그리드 레이아웃 부모 속성 part2 - by. UXKM

Publishing
CSS
CSS 고급
그리드 레이아웃 부모 속성 part2

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

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

요약 설명
그리드 레이아웃 - 부모 속성 part 2에서는

grid 속기형 속성

grid 거터

grid 콘텐츠(content) 정렬

grid 아이템(items) 정렬에 대한 내용을 다루고 있습니다.

부모 속성(properties for the parent - grid container)

grid 속기형 속성

요약 설명
하나의 속성에 다음 속성들을 모두 일괄 설정할 수 있는 grid 속기형 속성입니다.
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

grid

grid-template-xxx과 grid-auto-xxx의 단축 속성을 설명합니다.
명시적 그리드 속성 (grid-template-rows, grid-template-columns, grid-template-areas),
암시적 그리드 속성 (grid-auto-rows, grid-auto-columns, grid-auto-flow)을 축약형으로 선언합니다.

none : 모든 속성을 초기 값으로 적용
<grid-template-rows> / <grid-template-columns> : grid-tempate-rows / grid-template-columns 속성 설정
<grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]] : grid-auto-flow / grid-auto-rows / grid-auto-columns 속성 설정

									.container {
										display: grid;

										/* <'grid-template'> values */
										grid: none;
										grid: "a" 100px "b" 1fr;
										grid: [linename1] "a" 100px [linename2];
										grid: "a" 200px "b" min-content;
										grid: "a" minmax(100px, max-content) "b" 20%;
										grid: 100px / 200px;
										grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

										/* <'grid-template-rows'> / [ auto-flow && dense ] <'grid-auto-columns'> values */
										grid: 200px / auto-flow;
										grid: 30% / auto-flow dense;
										grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
										grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

										/* [ auto-flow && dense ] <'grid-auto-rows'> / <'grid-template-columns'> values */
										grid: auto-flow / 200px;
										grid: auto-flow dense / 30%;
										grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
										grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
									}

기본 값

									.container {
										display: grid;
										grid-template-rows: none;
										grid-template-columns: none;
										grid-template-areas: none;
										grid-auto-rows: auto;
										grid-auto-columns: auto;
										grid-auto-flow: row;
										grid-column-gap: 0;
										grid-row-gap: 0;
										column-gap: normal;
										row-gap: normal;
									}

예시1

									.container {
										display: grid;
										grid: 100px 300px / 3fr 1fr;
										/* 위 방식은 아래 방식처럼 각각 사용한것과 동일합니다. */
										grid-template-rows: 100px 300px;
										grid-template-columns: 3fr 1fr;
									}

예시2

									.container {
										display: grid;
										grid: auto-flow / 200px 1fr;
										/* 위 방식은 아래 방식처럼 각각 사용한것과 동일합니다. */
										grid-auto-flow: row;
										grid-template-columns: 200px 1fr;
									}

예시3

									.container {
										display: grid;
										grid: auto-flow dense 100px / 1fr 2fr;
										/* 위 방식은 아래 방식처럼 각각 사용한것과 동일합니다. */
										grid-auto-flow: row dense;
										grid-auto-rows: 100px;
										grid-template-columns: 1fr 2fr;
									}

예시4

									.container {
										display: grid;
										rid: 100px 300px / auto-flow 200px;
										/* 위 방식은 아래 방식처럼 각각 사용한것과 동일합니다.
										grid-template-rows: 100px 300px;
										grid-auto-flow: column;
										grid-auto-columns: 200px;
									}

예시5

									.container {
										display: grid;
										grid:
											[row1-start] "header header header" 1fr [row1-end]
											[row2-start] "footer footer footer" 25px [row2-end]
											/ auto 50px auto;

										/* 위 방식은 아래 방식처럼 각각 사용한것과 동일합니다. */
										grid-template-areas:
											"header header header"
											"footer footer footer";
										grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
										grid-template-columns: auto 50px auto;
									}

grid shorthand 예제

grid 거터

그리드 라인(행/열) 사이 간격(gap)을 조정합니다.
그리드 거터 속성의 이름 앞에 붙어 있던 grid- 는 모두 제외 되었습니다. 이전에 사용되던 이름은 grid-row-gap, grid-column-gap, gap 입니다.
모든 브라우저 호환 이전까지는 예전 이름을 사용하거나, postcss-gap-properties를 사용할 수 있습니다.

column-gap(grid-column-gap) / row-gap(grid-row-gap)

열과 열 사이 및 행과 행 사이의 간격(line)을 지정할 수 있습니다.
grid- 접두사가 제거되어 grid-column-gap = column-gap, grid-row-gap = row-gap으로 이름이 변경되었습니다.
grid- 접두사가 없는 속성은 Chrome 68 이상, Safari 11.2 릴리스 50 이상 및 Opera 54 이상에서 지원됩니다.

column-gap : <line-size>
row-gap : <line-size>

									.container {
										display: grid;
										grid-column-gap: <line-size>;
										grid-row-gap: <line-size>;
									}

									/* 예제 */
									.container {
										display: grid;
										grid-template-columns: 100px 50px 100px;
										grid-template-rows: 80px auto 80px;
										grid-column-gap: 10px;
										grid-row-gap: 15px;
									}

gutters는 외부 모서리가 아닌 열 / 행 사이에만 작성됩니다. — [`gutters`는 외부 모서리가 아닌 열 / 행 사이에만 작성됩니다.]

gap(grid-gap)

column-gap / row-gap 의 축약(shorthand) 속성입니다.
grid- 접두사가 제거되고 grid-gap = gap 으로 이름이 변경되었습니다.
grid- 접두사가 없는 속성은 chrome 68 이상, safari 11.2 릴리스 50 이상 및 opera 54 이상에서 지원됩니다.
그리드 거터 속성의 이름 앞에 붙어 있던 grid-는 모두 제외되었습니다. 이전에 사용되던 이름은 grid-row-gap, grid-column-gap, gap입니다.

모든 브라우저 호환 이전까지는 예전 이름을 사용하거나 postcss-gap-properties를 사용할 수 있습니다.
그리드 행/열 사이 간격을 조정할 수 있으며, 퍼센트 값은 콘텐츠 영역에 상대적으로 설정됩니다.

축약(shorthand) 속성 - gap : <grid-row-gap> <grid-column-gap>

									.container {
										display: grid;
										grid-gap: <grid-row-gap> <grid-column-gap>;
									}

									/* 예제 */
									.container {
										display: grid;
										grid-template-rows: 80px auto 80px;
										grid-template-columns: 100px 50px 100px;
										/* 행 사이 간격 설정 */
										row-gap: 10px;
										/* 열 사이 간격 설정 */
										column-gap: 15px;
									}

									/* 축약형 */
									.container {
										display: grid;
										grid-template: 80px auto 80px / 100px 50px 100px;
										/* 행/열 사이 간격 설정 */
										gap: 10px 15px;
									}

									/* grid-gap 값으로 1개만 입력하면 행/열 사이 간격이 동일하게 설정됩니다. */
									.container {
										display: grid;
										gap: 20px; /* or grid-row-gap: 20px; grid-column-gap: 20px; */
									}

grid 콘텐츠(content) 정렬

align-content

									.container {
										display: grid;
										align-content : start | center | end | stretch | space-between | space-around | space-evenly;
									}

start : 그리드 컨테이너 영역의 시작점(위쪽)에 아이템 트랙을 정렬합니다

align-content: start;
center : 그리드 컨테이너 영역의 중앙에 아이템 트랙을 정렬합니다(수직 가운데 정렬)

align-content: center;
end : 그리드 컨테이너 영역의 끝점(아래쪽)에 아이템 트랙을 정렬합니다

align-content: end;
stretch : 그리드 컨테이너 영역을 아이템 트랙 크기를 조정하여 채움(열 축을 채우기 위해 그리드 콘텐츠를 늘림)

align-content: stretch;
space-between : 그리드 컨테이너 영역의 양 가장자리 공백 없이 아이템 트랙(열) 사이 공간을 나눕니다(첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬)

align-content: space-between;
space-around : 그리드 컨테이너의 남은 영역을 아이템 트랙(열)이 좌/우 공간으로 나눕니다(양 가장자리 공간은 아이템 그룹 사이 간격의 1/2)(각 행 위아래에 여백을 고르게 정렬)

align-content: space-around;
space-evenly : space-around와 비슷해 보이지만, 공간을 모두 동일하게 나누는 점이 다릅니다(모든 여백을 고르게 정렬)

align-content: space-evenly;

justify-content

그리드 콘텐츠를 수평(행 축)으로 정렬할 수 있습니다.
그리드 컨테이너의 크기보다 작은 그리드 아이템 트랙(px와 같은 고정 단위로 설정된 경우)의 크기라면 아이템 트랙을 정렬할 수 있습니다.
이 속성은 행(row) 축을 따라 그리드 아이템 트랙을 정렬하며, align-content 속성과 반대 방향입니다.

									.container {
										display: grid;
										justify-content: start | end | center | stretch | space-between | space-around | space-evenly;
									}

start : 그리드 컨테이너 영역의 시작점(왼쪽)에 아이템 트랙을 정렬합니다

justify-content: start;
center : 그리드 컨테이너 영역의 중앙에 아이템 트랙을 정렬

justify-content: center;
end : 그리드 컨테이너 영역의 끝점(오른쪽)에 아이템 트랙을 정렬합니다

justify-content: end;
stretch : 그리드 컨테이너 영역을 아이템 트랙 크기를 조정하여 채움(행 축을 채우기 위해 그리드 콘텐츠를 늘림)

justify-content: stretch;
space-between : 그리드 컨테이너 영역의 양 가장자리 공백 없이 아이템 트랙(열) 사이 공간을 나눕니다(첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬)

justify-content: space-between;
space-around : 그리드 컨테이너의 남은 영역을 아이템 트랙(열)이 좌/우 공간으로 나눔(양 가장자리 공간은 아이템 그룹 사이 간격의 1/2)(각 열 좌우에 여백을 고르게 정렬)

justify-content: space-around;
space-evenly : space-around와 비슷해보이지만, 공간을 모두 동일하게 나누는 점이 다름(모든 여백을 고르게 정렬)

justify-content: space-evenly;

place-content

<align-content> / <justify-content>의 단축 속성입니다.
첫 번째 값은 align-content속성 값이고 두 번째 값은 justify-content 속성 값입니다.
firefox버전 60부터는 align-content 및 justify-content에 모두 유효한 경우 단일 값만 지정할 수 있습니다.

위치 정렬(positional alignment)

align-content는 왼쪽(left)과 오른쪽(right) 값을 사용하지 않습니다.

									.container {
										display: grid;
										place-content: center start;
										place-content: start center;
										place-content: end left;
										place-content: flex-start center;
										place-content: flex-end center;
									}

기준선 정렬(baseline alignment)

justify-content는 기준 값을 사용하지 않습니다.

									.container {
										display: grid;
										place-content: baseline center;
										place-content: first baseline space-evenly;
										place-content: last baseline right;
									}

분산 정렬(distributed alignment)

									.container {
										display: grid;
										place-content: space-between space-evenly;
										place-content: space-around space-evenly;
										place-content: space-evenly stretch;
										place-content: stretch space-evenly;
									}

grid 아이템(items) 정렬

align-items

그리드 아이템(items)들을 수직(열 축) 정렬합니다.
열(column) 축을 따라 그리드 아이템 내부 콘텐츠를 정렬합니다. (justify-items 속성의 반대)
이 설정은 그리드 컨테이너 내부 모든 그리드 아이템에 적용됩니다.
개별 그리드 아이템에 행축 콘텐츠 정렬 속성을 적용하려면 align-self 속성을 사용할 수 있습니다.

									.container {
										display: grid;
										align-items: start | end | center | stretch;
									}

start : 그리드 영역의 시작점(위쪽)에 콘텐츠 정렬

align-items: start;
center : 그리드 영역의 중앙에 콘텐츠 정렬(수직 가운데 정렬)

align-items: center;
end : 그리드 영역의 끝점(아래쪽)에 콘텐츠 정렬

align-items: end;
stretch : 기본값으로 그리드 영역 전체 너비를 채움(열 축을 채우기 위해 그리드 아이템을 늘림)

align-items: stretch;

justify-items

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

									.container {
										display: grid;
										justify-items: start | end | center | stretch;
									}

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

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

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

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

justify-items: stretch;

place-items

align-items와 justify-items의 단축 속성입니다.
첫 번째 값은 align-items 속성 값이고 두 번째 값은 justify-items 속성 값입니다.

키워드 값(Keyword values)

									.container {
										display: grid;
										place-items: auto center;
										place-items: normal start;
									}

위치 정렬(positional alignment)

									.container {
										display: grid;
										place-items: center normal;
										place-items: start auto;
										place-items: end normal;
										place-items: self-start auto;
										place-items: self-end normal;
										place-items: flex-start auto;
										place-items: flex-end normal;
										place-items: left auto;
										place-items: right normal;
									}

기준선 정렬(baseline alignment)

									.container {
										display: grid;
										place-items: baseline normal;
										place-items: first baseline auto;
										place-items: last baseline normal;
										place-items: stretch auto;
									}