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

2024-07-30

요약 설명
웹 페이지 컨텐츠를 쉽게 행과 열로 나눌 수있는 새롭고 강력한 css 레이아웃 시스템입니다.
css grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.
flexible box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 css grid를 사용할 수 있습니다.

grid는 flex와 같이 grid container(컨테이너)와 grid item(아이템)이라는 두 가지 개념으로 구분되어 있습니다.
container는 items를 감싸는 부모 요소이며, 그 안에서 각 item을 배치할 수 있습니다.

2017년 10월 17일 microsoft edge 브라우저는 css grid 구현을 출시 했습니다.
css grid 레이아웃 모듈은 표준 입후보(cr) 상태이지만, 브라우저 대부분이 완벽하게 지원하고 있습니다.
다만 ie 10 이상 부분 지원하고 있어 ie 10, 11을 프로젝트에서 고려해야 하는 상황일 경우, ie에서 css grid를 활용하는 방법을 사용해야 크로스 브라우징 할 수 있습니다.

grid 레이아웃과 flexible box(flexbox) 레이아웃의 기본 차이점이라면,
플랙스박스는 한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었다는 점입니다.(1차원)
하지만, 그리드는 행과 열 모두를 염두에 둔 2차원적 레이아웃을 고려해서 설계되었습니다.
1차원 대비 2차원의 차이점 외에도, 레이아웃을 할 때 플랙스박스와 그리드 중에서 어떤 것을 써야 할지를 결정하는 또 다른 요인이 있습니다.

플랙스박스는 좀 더 콘텐츠에 초점이 맞춰져 있습니다. 플랙스박스의 이상적인 사용 사례는 여러 아이템을 컨테이너에 고르게 배치하려는 경우입니다.
여기서 콘텐츠의 크기가 각 아이템이 차지하는 공간을 결정합니다.
아이템이 새로운 줄로 줄 바꿈 되면, 아이템의 크기와 해당 줄의 사용 가능한 공간에 따라 간격이 조정됩니다.

그리드는 레이아웃을 먼저 고려하게 됩니다.(2차원)
css 그리드 레이아웃을 사용할 때는 우선 레이아웃을 작성한 다음 그 위에 아이템을 배치하거나,
자동 배치 규칙을 통해 견고하게 짜인 그리드 위에 놓인 그리드 셀에 아이템을 배치하게 됩니다.
콘텐츠의 크기에 따라 조절되는 트랙을 만들 수도 있지만, 이렇게 하면 전체 트랙을 변경하게 됩니다.

파이어폭스 개발자 도구에 있는 grid inspector(요소검사)를 사용하여 레이아웃을 보면 아이템이 그리드 라인에 어떻게 배치되어 있는지 이해하기 쉽게 되어 있습니다.

그리드 요약설명

grid container : 전체 grid layout을 감싸는 역할을 수행합니다. display: grid | inline-grid; 속성을 통해 지정할 수 있습니다.
grid item : grid container에 속해있는 하위 dom 요소를 뜻합니다.
grid track : grid layout에 존재하는 행 또는 열을 의미합니다. 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)의 차이점

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

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

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

grid

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

line

선(line)은 일반적으로 거터(gutter)라고 하는 트랙과 트랙 사이의 간격을 의미합니다.
즉, 그리드의 행/열을 그리는 선을 말하며, 각 선은 라인 넘버를 갖습니다. 그리드 아이템을 배치하는 기준으로 사용됩니다.

track

트랙(track)은 하나의 행(row) 혹은 열(column)을 의미합니다.
즉, 그리드 트랙은 그리드 라인 사이의 행 또는 열 공간을 말합니다.

cell

셀(cell)은 아이템(item)이 배치되는 최소 단위의 영역(area)입니다.
즉, 그리드 셀은 4개의 그리드 라인이 묶여 그려지는 가장 작은 단위(유닛) 입니다.

area

영역(area)은 아이템이 배치되는, 하나 이상의 셀(cell)로 이루어진 영역입니다.
즉, 그리드 에어리어는 그리드 유닛이 묶인 영역으로 고유한 식별자를 가지며, 식별자를 통해 요소를 배치할 수 있습니다.

gutters

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

4.5.2. grid functions

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

repeat

repeat() 함수의 첫번째 인자는 반복 횟수를 설정합니다.
repeat() 함수는 행/열(Track)의 크기 정의를 반복히며, '반복되는 횟수'와 '행/열의 크기 정의'를 인수로 사용합니다.
grid-template-rows와 grid-template-columns에서 사용합니다.
repeat() 함수 또는 표기법(notation)을 사용하면 반복되는 값을 손쉽게 설정할 수 있습니다.
상수 대신 변수 값으로 자동 채움(auto-fill)을 설정하면 컨테이너 영역을 자동으로 반복하여 채웁니다.
반면 자동 맞춤(auto-fit)으로 설정하면 그리드 컨테이너 내부에 빈 트랙이 존재할 경우 그 공간을 나눠 맞춥니다.

W3C Flexible Lengths: the fr unit 참조

각 코드 블록 내 컨테이너(.container)들은 모두 같은 의미이며, repeat함수를 활용하여 사용하는 방법을 보여주는 예시입니다.
repeat함수를 활용하여 작업하면 코드가 간결해집니다.

코드 예제

									.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() 함수는 행/열(Track)의 '최소/최대 크기'를 정의합니다.
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() 함수는 행/열(Track)의 크기를 그리드 아이템(Item)이 포함하는 내용(Contents) 크기에 맞춥니다.
'내용의 최대 크기'를 인수로 사용합니다.
minmax(auto, max-content)와 유사합니다.
fit-content( [ <length> | <percentage> ] )

코드 예제

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

4.5.3. grid units

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

fr

fr(fractional unit)은 사용 가능한 공간에 대한 비율을 의미합니다.
그리드 트랙 사이즈로 사용 되는 fr 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정합니다.
퍼센트(%) 단위와 유사해 보일 수 있으나, 퍼센트 값과 다르게 길이가 아닙니다.
그래서 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

그리드 아이템이 포함하는 내용(Contents)의 최소 크기를 의미합니다.
콘텐츠에 한글을 사용할 경우 단어가 묶여있어 아이템의 영역을 벗어날 때는 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

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

코드 예제

								.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을 사용합니다.
즉, 트랙에 값을 정확히 알 수 없을 때 해당 값들을 넣어주면 됩니다.
행/열(Track)의 개수를 그리드 컨테이너(Container) 및 행/열 크기에 맞게 자동으로(암시적) 조정합니다.
repeat() 함수와 같이 사용하며, 행/열과 아이템(Item) 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용합니다.(반응형 그리드)
auto-fill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작합니다.

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)은 채움과 유사하게 작동하지만, 그리드 내부에 빈 트랙이 존재할 경우 반복 횟수만큼 반복된 트랙을 빈 트랙 공간을 나눠 핏팅(fitting)합니다.

									.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)의 차이점

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

grid

line

track

cell

area

gutters

4.5.2. grid functions

repeat

코드 예제

9컬럼 그리드 코드 예제

12컬럼 그리드 코드 예제

minmax

코드 예제

fit-content

코드 예제

4.5.3. grid units

fr

코드 예제

min-content

코드 예제

max-content

코드 예제

auto-fill, auto-fit

코드 예제

auto-fill과 auto-fit의 차이

자동 채우기(auto-fill)

자동 채우기(auto-fit)