그리드 완벽 가이드

그리드 컨테이너 속성

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• place-items
• justify-content
• align-content
• place-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

부모 속성
(그리드 컨테이너)

display

요소를 그리드 컨테이너로 정의하고 콘텐츠에서 사용할 새로운 그리드 양식화 문맥^{grid formatting context}을 만든다.

값 :

grid – 블록 레벨 그리드를 정의한다.
inline-grid – 인라인 레벨 그리드를 정의한다.

참고 : 그리드 매개변수를 중첩된 요소(서브그리드)로 활용하는 내용은 CSS 그리드 명세 레벨2에서 다룬다. (관련 설명 바로가기)

————————————————————————–

grid-template-columns
grid-template-rows

쉼표를 넣지 않고 값을 나열하여 그리드의 열과 행을 정의한다. 값은 트랙의 크기를 나타내고 값 사이의 공간은 그리드 라인을 나타낸다.

값 :

<track-size> – 그리드의 길이, 백분율, 사용 가능한 공간을 나눈 값(fr 단위 사용)이다.
<line-name> – 임의로 정한 이름이다.

예시 :

트랙 값 사이에 빈 공간을 두면 그리드 라인에 양수와 음수 번호가 자동으로 할당된다.

그리드 라인의 이름을 명확하게 지정할 수도 있다. 괄호 안을 참고하자.

그리드 라인에는 한 개 이상의 이름을 붙일 수도 있다. 예시의 두 번째 라인은row1-end와 row2-start로 이름이 두 개다.

repeat()를 사용하여 동일한 문구를 반복할 수도 있다.

다음과 동일하다.

여러 그리드 라인의 이름이 같을 경우 라인 이름과 숫자로 지정할 수 있다.

fr단위로 트랙의 크기를 그리드 컨테이너의 여유 공간에 맞추어 설정할 수 있다. 다음 예시는 각 항목의 폭을 그리드 컨테이너의 3분의 1만큼 할당했다.

여유 공간은 비유동적인 항목을 제외하고 계산된다. 다음 예시에서 fr단위가 사용할 수 있는 전체 여유 공간은 50px을 제외한 만큼이다.

————————————————————————–

grid-template-areas

grid-area 속성으로 지정한 그리드 영역의 이름을 참조하여 그리드 템플릿을 정의한다.  그리드 영역의 이름을 반복하면 셀이 병합되며 마침표(.)는 빈 셀을 의미한다. 구문 자체가 그리드 구조를 시각적으로 표현한다.

값 :

<grid-area-name> – grid-area의 이름이다.
. – 빈 셀을 의미한다.
none – 그리드 영역을 지정하지 않는다.

예시 :

3행 4열 그리드다. 상단 전체는 header 영역이다. 가운데 행은 main 영역 2열, 빈 셀 1열, sidebar 영역 1열로 구성되고 하단 전체는 footer 영역이다.

행마다 셀의 개수는 동일하다.

빈 셀 하나를 나타내기 위해 여러 개의 마침표를 사용할 수 있다. 공백 없이 연속된 마침표는 빈 셀 하나를 의미한다.

그리드 영역 이름은 있으나 그리드 라인 이름이 정의되어 있지 않다면 임의로 이름이 자동으로 부여된다. 그리드 영역 이름이 foo라면 해당 영역이 시작하는 행과 열의 라인은 foo-start, 끝나는 행과 열은 foo-end가 된다. 이는 그리드 라인이 여러 개의 이름을 가질 수 있음을 뜻한다. 앞의 예시에서 가장 왼쪽 라인은 header-star, main-start, footer-start로 이름이 세 개다.

————————————————————————–

grid-template

grid-template-rows, grid-template-columns, grid-template-areas를 한 구문으로 선언한다.

값 :

none – 세 가지 속성을 모두 초깃값으로 설정한다.
<grid-template-rows> / <grid-template-columns> – grid-template-columns와 grid-template-rows를 각각 지정된 값으로 설정하고 grid-template-areas는 none으로 설정한다.

세 가지 모두 설정하는 것보다 조금 복잡하지만 꽤 편리하게 정의할 수 있다. 다음 예시를 살펴보자.

다음과 동일하다.

grid-template는 암시적 그리드 속성(grid-auto-columns, grid-auto-rows, grid-auto-flow)을 재정의하지 않는다. 더 상세하게 정의하기를 원한다면 grid-template보다는 grid 속성을 활용하기 바란다.

————————————————————————–

grid-column-gap
grid-row-gap

그리드 라인의 크기를 지정한다. 열 또는 행 사이 틈의 폭을 설정한다고 보면 된다.

값 :

<line-size>– 간격 값이다.

예시 :

앞에서 지정한 값은 외곽을 제외한 열 또는 행 사이의 간격만 정의할 수 있다.

참고: 접두사 grid-를 삭제하여 grid-column-gap, grid-row-gap 대신 column-gap, row-gap으로도 사용할 수 있다. 이 속성은 크롬 버전 68, 사파리 버전 11.2, 오페라 버전 54부터 지원한다.

————————————————————————–

grid-gap

grid-row-gap과 grid-column-gap의 축약형이다.

값 :

<grid-row-gap> <grid-column-gap> – 간격 값이다.

예시 :

grid-row-gap을 지정하지 않았다면 grid-column-gap과 동일한 값으로 설정된다.

참고 : 접두사 grid-를 제외하고 grid-gap 대신 gap으로도 사용할 수 있다. 이 속성은 크롬 버전 68, 사파리 버전 11.2, 오페라 버전 54부터 지원한다.

————————————————————————–

justify-items

그리드 아이템을 인라인(행) 기준으로 정렬한다(이와 반대로 블록(열) 기준으로 정렬하는 align-items가 있다). 이 속성값은 컨테이너 내의 모든 그리드 아이템에 적용된다.

값 :

start – 셀 시작 선에 맞추어 왼쪽으로 정렬한다.
end – 셀 끝 선에 맞추어 오른쪽으로 정렬한다.
center – 셀 중앙으로 정렬한다.
stretch – 셀 폭에 맞추어 정렬한다(기본값).

예시 :

그리드 아이템을 개별적으로 정렬하고 싶을 때는 justify-self를 사용한다.

————————————————————————–

align-items

그리드 아이템을 블록(열) 기준으로 정렬한다(이와 반대로 인라인(행) 기준으로 정렬하는 justify-items가 있다). 이 속성값은 컨테이너 내의 모든 그리드 아이템에 적용된다.

값 :

start – 셀의 시작 선에 맞추어 위로 정렬한다.
end – 셀의 끝 선에 맞추어 아래로 정렬한다.
center – 셀의 중앙으로 정렬한다.
stretch – 셀의 높이에 맞추어 정렬한다(기본값).

예시 :

그리드 아이템을 개별적으로 정렬하고 싶을 때는 align-self를 사용한다.

————————————————————————–

place-items

place-items는 align-items와 justify-items를 한 문장에 정의할 수 있다.

값 :

<align-items> / <justify-items> – 첫 번째 값은 align-items, 두 번째 값은 justify-items를 입력한다. 두 번째 값을 생략하면 첫 번째 값이 두 속성에 모두 적용된다. 에지^Edge를 제외한 대부분의 브라우저가 place-items 속성을 지원한다.

더 자세한 내용은 align-items 와 justify-items를 참고하기 바란다.

————————————————————————–

justify-content

그리드 아이템이 px 등 고정된 크기로 정의되어 있을 때 간혹 그리드 전체 크기가 그리드 컨테이너보다 작을 수도 있다. 이런 경우에는 그리드 컨테이너 내 그리드의 위치를 정렬할 수 있다. 이 속성은 그리드를 인라인(행) 기준으로 정렬한다(이와 반대로 블록(열) 기준으로 정렬하는 align-content가 있다).

값 :

start – 그리드 컨테이너 시작 선에 맞추어 왼쪽으로 정렬한다.
end – 그리드 컨테이너 끝 선에 맞추어 오른쪽으로 정렬한다.
center – 그리드 컨테이너 중앙으로 정렬한다.
stretch – 그리드 컨테이너 폭에 맞추어 그리드 아이템의 크기를 변경한다.
space-around – 각 그리드 아이템 사이에 간격을 균일하게 두고 그리드 컨테이너 양 끝에는 그 간격의 절반을 둔다.
space-between – 그리드 컨테이너 양 끝에는 공간이 없고 각 그리드 아이템 사이에는 간격을 균일하게 둔다.
space-evenly – 각 그리드 아이템 사이, 양 끝 그리드 아이템과 그리드 컨테이너 사이의 간격 모두 균일하게 둔다.

예시 :

————————————————————————–

align-content

그리드 아이템이 px 등 고정된 크기로 정의되어 있을 때 간혹 그리드 전체 크기가 그리드 컨테이너보다 작은 경우가 있을 수 있다. 이런 경우에는 그리드 컨테이너 내 그리드의 위치를 정렬할 수 있다. 이 속성은 그리드를 블록(열) 기준으로 정렬한다(이와 반대로 인라인(행) 기준으로 정렬하는 justify-content가 있다).

값 :

start – 그리드 컨테이너 시작 선에 맞추어 위로 정렬한다.
end – 그리드 컨테이너 끝 선에 맞추어 아래로 정렬한다.
center – 그리드 컨테이너 중앙으로 정렬한다.
stretch – 그리드 컨테이너 높이에 맞추어 그리드 아이템의 크기를 변경한다.
space-around – 각 그리드 아이템 사이에 간격을 균일하게 두고 그리드 컨테이너의 양 끝에는 그 간격의 절반을 둔다.
space-between – 그리드 컨테이너 양 끝에는 공간이 없고 각 그리드 아이템 사이에는 간격을 균일하게 둔다.
space-evenly – 각 그리드 아이템 사이, 양 끝 그리드 아이템과 그리드 컨테이너 사이의 간격 모두 균일하게 둔다.

예시 :

————————————————————————–

place-content

place-content는 align-content와 justify-content를 한 문장에 정의할 수 있다.

값 :

<align-content> / <justify-content> – 첫 번째 값은 align-content, 두 번째 값은 justify-content를 입력한다. 두 번째 값을 생략하면 첫 번째 값이 두 속성에 모두 적용된다. 에지를 제외한 대부분의 브라우저가 place-content 속성을 지원한다.

더 자세한 내용은 align-content와 justify-content를 참고하기 바란다.

————————————————————————–

grid-auto-columns
grid-auto-rows

자동으로 생성된 그리드 트랙(암시적 그리드 트랙)의 크기를 지정한다. 그리드 내부의 셀보다 그리드 아이템이 많은 경우 또는 그리드 아이템이 명시적 그리드를 벗어났을 때 암시적 그리드 트랙이 만들어진다(명시적^explicit 그리드와 암시적 ^implicit 그리드의 차이 참고).

값 :

<track-size> – 길이, 백분율, 사용 가능한 공간을 나눈 값(fr 단위 사용)이다.

다음 내용을 통해 암시적 그리드 트랙이 생성되는 과정을 살펴보자:

앞의 코드로 2 x 2 그리드를 만든다.

이제 다음과 같이 grid-column과 grid-row를 사용하여 그리드 아이템을 만든다고 상상해보자.

.item-b는 열 라인5번과 6번 사이에 있어야 하지만 우리는 열 라인5번, 6번을 만든 적이 없다. 이를 해결하기 위해 폭이 0인 암시적 트랙을 생성하여 사이를 채운다. 이 암시적 트랙의 크기를 설정할 수 있는 것이 바로 grid-auto-columns와 grid-auto-rows다.

————————————————————————–

grid-auto-flow

위치를 명시적으로 지정하지 않은 그리드 아이템은 자동 배치 알고리즘^{auto-placement algorithm}을 통해 자동으로 위치를 지정한다. grid-auto-flow는 이 자동 배치 알고리즘을 컨트롤할 수 있다.

값 :

row – 자동 배치 알고리즘으로 각 행을 순차적으로 채우고 필요하면 행을 추가한다(기본값).
column – 자동 배치 알고리즘으로 각 열을 순차적으로 채우고 필요하면 열을 추가한다.
dense – 위치 배정 중에 작은 크기의 그리드 아이템이 나중에 나타날 경우 자동 배치 알고리즘으로 그리드의 앞 부분을 먼저 채운다.

dense는 그리드 아이템의 크기에 따라 빈 공간을 먼저 채우기 때문에 순서가 뒤바뀌어 접근성이 떨어질 수 있다.

예시 :

다음 HTML을 살펴보자:

2행 5열로 구성된 그리드를 만들고 grid-auto-flow를 row로 지정한다(기본값).

그리드 아이템 중 두 개만 위치를 지정한다.

위에서 grid-auto-flow를 row로 지정했으므로 다음와 같은 그리드가 생성될 것이다. 앞에서 위치를 지정하지 않은 세 개의 아이템(item-b, item-c, item-d)은 다음과 같이 순서대로 행을 채운다.

grid-auto-flow를 column으로 설정하면 item-b, item-c, item-d는 다음과 같은 순서로 열을 채운다.

————————————————————————–

grid

grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow가 모든 속성을 하나로 축약한다(명시적 또는 암시적 그리드 속성을 한 문장 안에서 정의할 수 있다).

값 :

none – 모든 하위 속성을 초깃값으로 설정한다.
<grid-template> – grid-template의 축약과 동일하다.
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? – grid-template-rows 값을 설정한다. 슬래시(/) 오른쪽에 auto-flow를 입력하면 grid-auto-flow를 column으로 설정한다. 추가로 dense를 입력하면 ‘dense’ 자동 배치 알고리즘이 동작한다. grid-auto-columns를 생략하면 auto로 설정된다.
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> – grid-template-columns 값을 설정한다. 슬래시 왼쪽에 auto-flow를 입력하면 grid-auto-flow를 row로 설정한다. 추가로 dense를 입력하면 ‘dense’ 자동 배치 알고리즘이 동작한다. grid-auto-rows를 생략하면 auto로 설정된다.

예시 :

다음 두 코드는 동일하다.

다음 두 코드는 동일하다.

다음 두 코드는 동일하다.

다음 두 코드는 동일하다.

복잡하게 느낄 수도 있지만 꽤 편리한 구문으로 모든 것을 한 번에 설정할 수 있다. 한 문장으로 grid-template-areas, grid-template-rows, grid-template-columns의 설정 및 모든 하위 속성을 초깃값으로 세팅할 수 있다. 각 그리드 영역에 맞는 그리드 라인 이름과 트랙 크기를 하나로 지정할 수 있는 것이다. 다음 예시를 살펴보자.

다음과 동일하다.