그리드 레이아웃 요약, 함수, 단위 - by. UXKM

Publishing
CSS
CSS 고급
그리드 레이아웃 요약, 함수, 단위

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

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

요약 설명
플랙스박스는 콘텐츠에 초점을 맞추고, 그리드는 레이아웃을 먼저 고려합니다.

그리드 요약설명

grid container : 전체 그리드 레이아웃을 감싸는 역할을 수행합니다. display: grid | inline-grid; 속성을 통해 지정할 수 있습니다.
grid item : grid container에 속해있는 하위 DOM 요소를 뜻합니다.
grid track : 그리드 레이아웃에 존재하는 행 또는 열을 의미합니다. grid track의 개수는 명시적으로 지정할 수도, 암묵적으로 늘어나게 할 수도 있습니다.
grid line : grid track을 구분하는 선을 의미합니다. 선의 번호는 위에서 아래로(↓), 왼쪽에서 오른쪽으로(→) 매겨집니다. 그리드 라인의 번호는 1부터 시작된다는 점을 주의해야 합니다.
grid cell : 그리드 레이아웃에서 가장 작은 단위 요소이며, 테이블의 셀과 유사합니다.
grid area : 다수의 grid cell로 이루어진 영역을 뜻합니다. grid area는 항상 사각형의 모양을 가져야 합니다. (ㄴ자, ㄱ자 형태 불가능)

CSS3 Grid 모듈 속성을 컨테이너, 아이템 별로 정리

그리드 컨테이너(grid container)

display : 그리드 컨테이너를 지정합니다.

grid-template-rows : 행의 크기를 정의합니다.

grid-template-columns : 열의 크기를 정의합니다.

grid-template-areas : 영역 이름을 사용하여 레이아웃을 정의합니다.

grid-template : 행, 열, 영역을 한 번에 정의합니다.

row-gap : 행 사이 간격을 설정합니다.

column-gap : 열 사이 간격을 설정합니다.

gap : 행과 열 사이 간격을 동시에 설정합니다.

justify-items : 행 축에서 아이템을 정렬합니다.

align-items : 열 축에서 아이템을 정렬합니다.

justify-content : 행 축에서 그리드를 정렬합니다.

align-content : 열 축에서 그리드를 정렬합니다.

grid-auto-rows : 암시적 행의 크기를 설정합니다.

grid-auto-columns : 암시적 열의 크기를 설정합니다.

grid-auto-flow : 자동 배치 방향을 설정합니다.

grid : 그리드 관련 속성을 한 번에 설정합니다.
그리드 아이템(grid item)

grid-row-start : 행 시작 위치를 지정합니다.

grid-row-end : 행 끝 위치를 지정합니다.

grid-column-start : 열 시작 위치를 지정합니다.

grid-column-end : 열 끝 위치를 지정합니다.

grid-row : 행 시작과 끝을 한 번에 지정합니다.

grid-column : 열 시작과 끝을 한 번에 지정합니다.

grid-area : 영역 이름 또는 위치를 지정합니다.

justify-self : 행 축에서 개별 아이템을 정렬합니다.

align-self : 열 축에서 개별 아이템을 정렬합니다.

플랙스박스(flexible box) 와 그리드(grid)의 차이점

플랙스박스 : 레이아웃을 조정할 때 오직 가로 행 혹은 세로 열만 고려하여 작업할 때 사용합니다.
그리드 : 레이아웃을 조정할 때 가로 행과 세로 열 모두를 염두에 두고 작업할 때 사용합니다.

grid에서 사용되는 주요 용어 정리

그리드에서 사용하는 주요 용어에 대해서 설명합니다.

grid

HTML 요소에 display 속성 값으로 grid를 설정하면 그리드 컨테이너가 됩니다.
그리드 컨테이너는 행(rows)과 열(columns)을 가지며, 그리드 아이템을 배치할 수 있습니다.

line

선(line)은 그리드의 행/열을 구분하는 선을 의미합니다.
각 선은 라인 번호를 가지며, 그리드 아이템을 배치하는 기준으로 사용됩니다.

track

트랙(track)은 그리드 라인 사이의 행 또는 열 공간을 의미합니다.

cell

셀(cell)은 4개의 그리드 라인이 묶여 그려지는 가장 작은 단위입니다.

area

영역(area)은 하나 이상의 셀로 이루어진 영역입니다.
고유한 식별자를 가지며, 식별자를 통해 요소를 배치할 수 있습니다.

gutters

그리드 거터는 행 또는 열 사이 간격(gap)을 말합니다.
gap(row, column 동시 선언), row-gap, column-gap 속성으로 제어합니다.

grid functions

그리드에서 사용하는 주요 용어에 대해서 설명합니다.

repeat

repeat() 함수는 행/열의 크기 정의를 반복합니다.
첫 번째 인자는 반복 횟수, 두 번째 인자는 행/열의 크기 정의를 사용하며, grid-template-rows와 grid-template-columns에서 사용합니다.

W3C Flexible Lengths: the fr unit 참조

코드 예제

									.container {
										display: grid;
										/* repeat() 함수 사용법 */
										grid-template-rows: repeat(2, 1fr);        /* 1fr 1fr */
										grid-template-columns: repeat(3, 1fr 2fr); /* 1fr 2fr 1fr 2fr 1fr 2fr */
									}

9컬럼 그리드 코드 예제

									.container {
										display: grid;
										grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px;
										/* 위 코드에 repeat() 함수를 사용하면 아래와 같습니다. */
										grid-template-columns: repeat(9, 100px);
									}

									.container {
										display: grid;
										grid-template-rows: [row-start] 200px [row-end row-start] 200px [row-end];
										grid-template-columns: [col-start] 100px [col-end col-start] 100px [col-end col-start] 100px [col-end];

										/* 위 코드에 repeat() 함수를 사용하면 아래와 같습니다. */
										grid-template-rows: repeat(2, [row-start] 200px [row-end]);
										grid-template-columns: repeat(3, [col-start] 100px [col-end]);

										/* 위처럼 row, column에 각각 repeat() 함수가 있을 경우 아래처럼 한 줄로 축약 가능합니다. */
										grid-template: repeat(2, [row-start] 200px [row-end]) / repeat(3, [col-start] 100px [col-end]);
									}

12컬럼 그리드 코드 예제

									.container {
										display: grid;
										grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
										/* 위 코드에 repeat() 함수를 사용하면 아래와 같습니다. */
										grid-template-columns: repeat(6, 1fr 2fr);
									}

minmax

minmax() 함수는 행/열의 최소/최대 크기를 정의합니다.
첫 번째 인수는 최솟값, 두 번째 인수는 최댓값이며, grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용합니다.

코드 예제

									/* 일반 요소에 min-width와 max-width 속성을 동시 지정하는 것과 유사합니다. */
									.container {
										display: grid;
										grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
									}

									/*
									minmax()를 통해 암시적 행/열(Track) 크기를 좀 더 유연하게 사용할 수 있습니다.
									다음 예제는 암시적 '행/열'의 크기를 최소 '200px/300px'으로 지정하지만 auto를 통해 그리드 아이템의 크기에 따라 확장될 수 있습니다.
									*/
									.container {
										display: grid;
										grid-auto-rows: minmax(200px, auto);
										grid-auto-columns: minmax(300px, auto);
									}

									.container {
										display: grid;
										/* minmax() 함수 사용법 */
										grid-template-rows: repeat(2, minmax(20px, auto));
										grid-template-columns: minmax(30px, auto) repeat(3, 1fr);
									}

fit-content

fit-content() 함수는 행/열의 크기를 그리드 아이템의 내용 크기에 맞춥니다.
내용의 최대 크기를 인수로 사용하며, minmax(auto, max-content)와 유사합니다.

코드 예제

									<style>
										/*
											// <length> values
											fit-content(200px)
											fit-content(5cm)
											fit-content(30vw)
											fit-content(100ch)
											 
											// <percentage> value
											fit-content(40%)
										*/

										.container {
											display: grid;
											grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
											grid-gap: 5px;
										}
									</style>

									<div id="container">
										<div>내용만큼만 적용되는 셀의 크기</div>
										<div>
											많은 텍스트가 있는 경우 fit-content로 정의한
											크기가 셀의 최대 크기가 됩니다.
											fit-content(300px)
										</div>
										<div>유연한 셀입니다.</div>
									</div>

`[ grid-template-columns: fit-content(300px) fit-content(300px) 1fr; ]`

grid units

그리드에서 사용하는 주요 단위들에 대해서 설명합니다.

fr

fr(fractional unit)은 사용 가능한 공간에 대한 비율을 의미합니다.
그리드 컨테이너의 여유 공간을 비율로 나눠 설정하며, 퍼센트(%) 단위와 달리 길이가 아니므로 calc() 함수에서 다른 값과 함께 처리할 수 없습니다.

코드 예제

									/*
										그리드 컨테이너의 3번째 컬럼에 100px, 4번째 컬럼에 25%를 사용하고
										남은 공간을 1번째 컬럼에 '1/3', 2번째 컬럼에 '2/3' 만큼 사용합니다.
									*/
									.container {
										display: grid;
										grid-template-columns: 1fr 2fr 100px 25%;
									}

fr(fractional unit) 사용 예시 — [ `fr(fractional unit)` 사용 예시 ]

min-content

그리드 아이템이 포함하는 내용의 최소 크기를 의미합니다.
한글을 사용할 경우 word-break: keep-all;을 선언하면 정상적으로 작동합니다.

코드 예제

									<style>
										.container {
											display: grid;
											grid-template-columns: min-content 1fr;
										}
									</style>

									<!-- 한글을 사용하는 경우 word-break: keep-all;를 설정하면 정상적으로 동작합니다. -->
									<div class="container">
										<div class="item">내용의 최소 크기</div>
										<!-- ··· -->
									</div>

한글을 사용하는 경우 word-break: keep-all;를 설정 — [ 한글을 사용하는 경우 `word-break: keep-all;`를 설정 ]

max-content

그리드 아이템이 포함하는 내용의 최대 크기를 의미합니다.

코드 예제

								.container {
									display: grid;
									grid-template-columns: max-content 1fr;
								}

								/*
									그리드 함수들과 같이 더 유용하게 활용할 수 있습니다.
									다음 예제는 총 3컬럼 그리드를 생성하며 각 열(Track)은 최대 1fr 크기를 가지지만,
									max-content를 통해 포함된 그리드 아이템의 내용보다 작아질 수 없습니다.
								*/
								.container {
									display: grid;
									grid-template-columns: repeat(3, minmax(max-content, 1fr));
								}

auto-fill, auto-fit

아이템의 개수를 알 수 없을 때 auto-fit, auto-fill을 사용합니다.
repeat() 함수와 함께 사용하며, 행/열의 개수를 자동으로 조정합니다. 반응형 그리드에 유용합니다.

auto-fill과 auto-fit — `[ auto-fill & auto-fit ]`

코드 예제

									/*
										다음 4컬럼 그리드 예제에서 컨테이너의 크기가 아이템들을 수용하기 충분하지 않은 경우 아이템은 넘치기 시작합니다.
										(아이템의 최소 크기가 100px입니다.)
									*/
										.container {
										display: grid;
										grid-template-columns: repeat(4, minmax(100px, 1fr));
									}

									/*
										만약 4컬럼 그리드를 고집할 필요가 없다면,
										다음과 같이 '반복횟수'(repeat() 함수의 첫 번째 인수)를 auto-fill이나 auto-fit으로 수정할 수 있습니다.
										이는 컨테이너의 크기가 아이템들을 수용하기 충분하지 않을 경우
										아이템을 자동으로 줄 바꿈 처리하며, 그에 맞게 암시적 행/열도 자동으로 수정합니다.
									*/
									.container {
										display: grid;
										grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
									}

auto-fill 유/무의 차이 — [ `auto-fill` 유/무의 차이 ]

auto-fill과 auto-fit의 차이

auto-fill과 auto-fit의 차이점은 그리드 컨테이너가 하나의 행/열(Track)에 모든 아이템을 수용하고 남는 공간이 있을 때 발생합니다.
auto-fill은 남는 공간(빈 트랙)을 그대로 유지하고, auto-fit은 남는 공간을 축소합니다.

자동 채우기(auto-fill)

채움(fill)은 반복 횟수만큼 계산하여 처리하지만 정해진 수 이상은 처리하지 않습니다.

									.container {
										display: grid;
										grid-template-columns: repeat(auto-fill, 1fr 2fr);
									}

자동 채우기(auto-fit)

맞춤(fit)은 채움과 유사하게 작동하지만, 빈 트랙이 존재할 경우 빈 공간을 나눠 맞춥니다.

									.container {
										display: grid;
										grid-template-rows: repeat(auto-fit, minmax(80px, auto));
									}

auto-fill과 auto-fit 비교 — `[ auto-fill`과 `auto-fit`의 차이 `]`

그리드 요약설명

CSS3 Grid 모듈 속성을 컨테이너, 아이템 별로 정리

그리드 컨테이너(grid container)

그리드 아이템(grid item)

플랙스박스(flexible box) 와 그리드(grid)의 차이점

grid에서 사용되는 주요 용어 정리

grid

line

track

cell

area

gutters

grid functions

repeat

코드 예제

9컬럼 그리드 코드 예제

12컬럼 그리드 코드 예제

minmax

코드 예제

fit-content

코드 예제

grid units

fr

코드 예제

min-content

코드 예제

max-content

코드 예제

auto-fill, auto-fit

코드 예제

auto-fill과 auto-fit의 차이

자동 채우기(auto-fill)

자동 채우기(auto-fit)