[프론트엔드][CSS] TIL Day-16 Grid 그리드(Grid layout)

CSS Grid는 수평선과 수직선으로 이루어진 집합체(격자무늬)로 웹페이지를 위한 이차원 레이아웃 방법이다.
플렉스는 수평이나 수직 중 하나를 기준(1차원)으로 해서 요소를 배치하지만, 그리드는 수평과 수직 어느 방향이든(2차원) 배치할 수 있다. 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 기능들(아래에 기술할 예정)이 많이 있다.


∨ 사용해서 좋은 점?
- 한 화면을 여러 개의 칼럼으로 구성해서 밑으로 늘어뜨리는 그리드 레이아웃은 이미 많은 시각 매체에서 사용하여
그리드 레이아웃 웹사이트 디자인은 사용자에게 안정감을 준다.
- 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃, 즉 사이트 전체나 콘텐츠 영역의 너비, 각 요소의 위치 등의
사이트 구조를 먼저 만들어 놓고 나중에 내용을 채워 넣는 등 업데이트가 편한 웹 디자인을 구성할 수 있다.
- 한 줄에 여러 요소를 배치하거나, 중요한 내용은 좀 더 넓은 공간에 두는 등 요소를 자유롭게 배치할 수 있다.
- 소스를 최대한 간단하게 유지하면서 대부분의 기기에 대응할 수 있다.



문서의 영역 중에서 Grid Layout를 적용할 요소들이 놓여있는 영역을 Grid 컨테이너(container)라고 한다.
Grid 컨테이너를 생성하려면 컨테이너 요소의 display 값을 grid 혹은 inline-grid로 지정한다.
이렇게 지정된 컨테이너의 일차 자식(direct children)요소가 Grid 항목(item)이 된다.
이 항목들을 그리드 컨테이너 안에 배치하기 위해서는, 칼럼(column)과 줄(row)의 크기와 개수를 지정해야 한다.

 

 

<일전에 float를 이용하여 레이아웃을 해보았는데, 동일한 디자인을 그리드로도 가능>

 

< 속성 grid-template-columns, grid-template-rows, grid-template-area을 이용하여 그리드 항목 배치 >

 

<wrapper라는 그리드 컨테이너를 grid-template-area로 위와 같이 항목 배치>

▣ 여기서 행과 열을 정의한 속성의 이름 중에 나온 템플릿 template이라는 말은 자주 들어본지라 속성에서의 의미와는 별개로 조사해보니,
사전적으로는 어떤 것을 만들 때 안내 역할을 하는 사용상의 형식을 의미할 때 쓰인다.
웹사이트에서 사용되는 템플릿의 의미는 어떤 서식이나 도식에서 자주 사용되는 기본 골격이나 구조를 말한다.
템플릿이라고 하면 자주 쓰는 포맷을 만들어서 열었을 때 필요한 정보만 치면 되도록 하는 파일이라고 이해할 수도 있다.

그리드의 기능

1. 픽셀 단위를 써서 트랙 크기가 고정된 그리드를 만들 수도 있고, 퍼센트나 fr(fraction)이라는 단위의 가변 크기를 지정해 유연한 그리드를 만들 수도 있다. (위의 이미지에서 각 색깔로 색칠되어 있는 부분들이 트랙들이다.)
2. 항목을 배치할 때, 라인 번호, 이름 또는 그리드 영역을 지정해 원하는 위치에 배치할 수 있고, 지정되지 않은 아이템은 알아서 적절하게 배치하는 알고리즘도 가지고 있다.
3. 지정된 그리드 밖에 따로 추가되는 콘텐츠에 대응하여 필요에 따라 행과 열을 추가할 수 있는 기능이 있다.
4. 그리드 영역에 항목을 배치한 후 어떻게 정렬할지, 혹은 전체 그리드을 어떻게 정렬할지 지정할 수 있다.
5. 그리드 셀에 하나 이상의 항목을 배치하거나 그리드 영역을 부분적으로 서로 겹치게 할 수 있다. 이 때, 중첩의 우선순위는 z-index 속성으로 지정할 수 있다.

 

그리드 트랙? 그리드 라인? 그리드 셀? 그리드 영역?

그리드 트랙 Grid Track : 그리드의 행과 열은 grid-template-columns속성과 grid-template-rows속성으로 정의하는데, 이 때 그리드에 그려진 두 라인 사이의 공간을 그리드의 트랙이라고 한다.

<색칠된 하나의 트랙>

그리드 라인 Grid Line : 그리드는 아이템을 배치할 때 쓸 수 있게 번호가 매겨진 라인을 자동으로 제공한다. 아래와 같이, 세 개의 컬럼(c)과 두 개의 로우(r)로 그리드 트랙이 정의된다면 그리드 라인은 컬럼에 4개(c+1)의 그리드 라인이, 로우에 3개(r+1)의 그리드 라인이 만들어지게 된다. 그리드 레이아웃의 특이한 점은 라인을 기준으로 크기를 결정하기 때문에, 라인 순번을 잘 이해해야 한다.

<그리드 라인>

※ 라인 1은 사용되는 언어의 방향에 따라 맨 왼쪽 라인이 될 수도, 맨 오른쪽 라인이 될 수도 있다.
또한, 라인에 이름을 지정할 수도 있다.


그리드 셀 Grid Cell : 그리드의 가장 작은 구성원이자, 자식요소 1개를 의미한다. 개념상 테이블의 셀과 비슷하다.

<그리드 셀(Cell)>

그리드 영역 Grid Area : 항목은 행이나 열 어느 쪽으로든 하나 이상의 셀에 걸쳐 있을 수 있고, 직사각형 모양의 영역이다.
아래의 그리드 영역은 2개의 행과 2개의 열 트랙에 걸쳐 있다.

<2개의 줄과 2개의 컬럼 트랙에 걸쳐있는 그리드 영역>

<Grid 부모요소, 자식요소의 속성과 속성값>

	역할	속성	설명		속성값	설명
그리드 컨테이너 (부모요소)에서 쓰는 속성	그리드 항목들을 아우르는 전체 레이아웃 적용	display	배치할 웹 요소들을 감싸는 부모요소를 그리드 컨테이너로 만듬.		grid	컨테이너 안 그리드 항목을 블록 레벨 요소로 배치
					inline-grid	컨테이너 안 그리드 항목을 인라인 레벨 요소로 배치
	그리드의 행과 열을 생성	grid-template-columns	그리드 항목을 배치할 때 칼럼의 크기(너비)와 개수를 지정함.		auto	ex) g-t-c속성: auto auto auto; 그리드항목(트랙)을 너비를 3등분으로 하여 생성 배치
					단위 혼용 가능	ex) g-t-c속성: auto 100px auto; 가운데 트랙은 100px로 크기 고정하고 양쪽 두 트랙은 나머지 너비를 2등분해 생성 배치 ex) g-t-c: 20px repeat(5, 1fr 2fr) 20px; 처음에 20px 크기의 트랙 생성 후 1fr 크기의 트랙과 2fr 크기의 트랙을 5번 반복해 채우고 마지막 20px 트랙을 붙여 그리드 완성
		grid-template-rows	그리드 항목을 배치할 때 줄의 높이를 지정함.			ex) g-t-r속성: 100px 200px; 첫째 줄 높이는 100px, 두번째 줄은 200px ex) g-t-r: 100px; 첫째 줄 높이는 100px로 지정되지만, 이 그리드 트랙이 n개 줄이면 명시되지 않은 모든 줄의 높이는 auto로 지정됨
	g-t-c속성과 g-t-r속성을 한번에 쓸 수 있는 단축 속성	grid	순서는 줄(row)/ 칼럼(column)의 형태로 작성함.		/* grid-template-columns: auto 100px auto; grid-template-rows: auto 200px; */ -> grid: auto 200px / auto 100px auto;
	자식요소를 grid-template-columns 안에서 배치하는 방법	justify-items	그리드 항목을 grid-template-columns 안에서 각자의 컬럼 내에서 수평 정렬		start	각 칼럼 내 시작점에 배치, (이하 시작점을 왼쪽으로 상정시)왼쪽 상단(모서리) 배치
					end	각 칼럼 내 끝점에 배치, 오른쪽 상단(모서리)배치
					center	각 칼럼 내 상단 중앙에 배치
					stretch (기본값)	자식요소의 너비 값이 없으면 기본적으로는 좌우로 가득차게 배치
	자식요소를 수평으로 배치하는 방법	justify-content	자식요소(그리드 항목)를 수평을 기준으로 정렬함, 플렉스의 justify-content의 개념과 모두 동일함		start	수평을 기준으로 항목들을 왼쪽 배치
					end	수평을 기준으로 항목들을 오른쪽 배치
					center	수평을 기준으로 항목들을 중앙에 배치
					space- between	첫 번째 컬럼과 끝 컬럼을 부모요소 양 끝에 배치, 나머지 칼럼들은 그 사이에 동일한 간격으로 배치
					space- around	항목들을 수평으로 양쪽으로 같은 간격으로 배치, 단 왼쪽 앞 컬럼과 오른쪽 끝 컬럼의 여백은 그사이 컬럼들 간격의 절반크기로 배치
					space- evenly	space-around와 마찬가지로 수평으로 각 컬럼들을 같은 간격으로 배치하나, 첫 번째 컬럼의 앞과 끝 항목의 뒤 여백까지 컬럼 간 간격과 동일하게 배치
	자식요소를 grid-template-columns 안에서 배치하는 방법	align-items	그리드 항목을 grid-template-columns 안에서 각자의 컬럼 내에서 수직 정렬		start	(이하 시작점을 왼쪽으로 상정시) justify-items: start;와 동일
					end	각 칼럼 내 끝점에 배치, 왼쪽 하단 (모서리)배치
					center	각 칼럼 내 왼쪽 중앙에 배치
					stretch (기본값)	자식요소의 너비 값이 없으면 기본적으로는 좌우로 가득차게 배치
	자식요소를 수직으로 배치하는 방법	align-content	자식요소(그리드 항목)를 수직을 기준으로 정렬함, 수직 정렬이기 때문에 부모요소의 높이 값이 필요, 플렉스의 align-items의 개념과 모두 동일함		start	수직을 기준으로 항목들을 상단에 배치
					end	수직을 기준으로 항목들을 하단에 배치
					center	수직을 기준으로 항목들을 중앙에 배치
					space- between	첫 번째 로우(줄)와 끝 로우(줄)를 부모요소 상하 양끝에 배치, 나머지 로우들은 그 사이에 동일한 간격으로 배치
					space- around	항목들을 수직으로 상하 방향 같은 간격으로 배치, 단 맨 위 줄과 맨 아래 끝 줄의 여백은 그사이 줄들 간격의 절반크기로 배치
					space- evenly	space-around와 마찬가지로 수직으로 줄들을 같은 간격으로 배치하나, 첫 번째 줄의 위와 마지막 줄의 밑 여백까지 줄들 간 간격과 동일하게 배치
					stretch	플렉스 항목을 늘려 교차축에 가득 차게 배치
	가로 또는 세로 사이의 간격을 정의	grid-column -gap	좌우 여백을 조절함.		크기	ex) grid-column-gap: 30px; 컬럼들 사이(좌우) 여백을 30px 줌
		grid-row-gap	상하 여백을 조절함		크기	ex) grid-row-gap: 60px; 줄들 사이(상하) 여백을 60px 줌
		grid-gap	좌우상하 여백을 조절함.		크기	ex) grid-gap: 30px 60px; 좌우 여백 30px, 상하 여백 60px 줌 ex) grid-gap: 30px; 좌우 여백, 상하 여백 동일하게 30px 줌
그리드 항목들 (자식요소)에서 쓰는 속성	부모요소의 정렬에 관계없이 개별적으로 배치	justify-self	자식요소 수평정렬을 개별적으로 배치		start	지정된 자식요소에만 수평정렬로 시작점에 배치
					end	지정된 자식요소에만 수평정렬로 끝점에 배치
					center	지정된 자식요소에만 수평정렬로 중앙에 배치
					stretch (기본값)	자식요소의 너비 값(이 없는 경우)을 가득 채움
		align-self	자식요소 수직정렬을 개별적으로 배치함.		start	지정된 자식요소에만 수직정렬로 시작점에 배치
					end	지정된 자식요소에만 수직정렬로 끝점에 배치
					center	지정된 자식요소에만 수직정렬로 중앙에 배치
					stretch (기본값)	자식요소의 높이 값(이 없는 경우)을 가득 채움
	그리드 라인을 이용해 그리드 항목을 배치하는 속성	grid-column -start	자식요소 칼럼(세로) 시작 라인번호를 지정함.		숫자(정수)	자식요소 세로기준 시작 위치
		grid-column -end	칼럼 마지막의 라인번호를 지정함.		정수	자식요소 세로 기준 끝 위치
		grid-column (grid-column -start와 grid-column -end 축약속성)	세로 시작과 세로 끝 위치 번호 사이에 슬래시(/)를 넣어 사용함.		정수 / 정수	ex) grid-column: 1 / 3; 컬럼기준 라인1에서 시작해 컬럼기준 라인 3에서 끝나는 크기
			span을 사용하여 세로 기준 끝 위치를 정수만큼 확장함.		정수 / span 정수	ex) grid-column: 1 / span 3; 컬럼기준 라인1에서 시작해 컬럼기준 라인 3개만큼(라인4까지) 확장해서 끝나는 크기
		grid-row-start	자식요소 줄(가로) 시작의 라인번호를 지정함.		숫자(정수)	자식요소 가로기준 시작 위치
		grid-row-end	줄 마지막의 라인번호를 지정함.		정수	자식요소 가로기준 끝 위치
		grid-row (grid-row-start와 grid-row -end 축약속성)	가로 시작과 가로 끝 위치 번호 사이에 슬래시(/)를 넣어 사용함.		정수 / 정수	ex) grid-row: 2 / 3; 줄 기준 라인2에서 시작해 줄 기준 라인 3에서 끝나는 크기
			span을 사용하여 가로 기준 끝 위치를 정수만큼 확장함.		정수 / span 정수	ex) grid-column: 2 / span 2; 줄 기준 라인2에서 시작해 줄 기준 라인 2개만큼(라인4까지) 확장해서 끝나는 크기
	줄 순서 변경	grid-row	줄 출연 순서를 변경함으로, 원래 출연 순서(위치)에서 다른 위치에서 나오도록 함.		정수	ex) grid-row : 3; 로우의 출연 순서를 3번째로 바꿈
	자식요소 1개의 순서 변경	order	자식요소 1개를 의미하는, 셀의 순서를 변경함		정수	플렉스의 order속성과 동일하게 숫자 작은 것이 왼쪽 기준으로 먼저 나오고, 마이너스(-)값도 사용 가능함.
	가로 세로 시작위치에서 가로 세로 끝 위치까지의 영역 지정	grid-area (속성값으로 영역을 지정하고 이때, 반드시 가로/세로 순서로 입력해야 함)	영역 시작 위치(가로 시작라인 / 세로 시작라인) / 영역 종료 위치(가로 종료라인 / 세로 종료라인)		정수 / 정수 / 정수 / 정수	ex) grid-area: 1 / 2 / 5 / 6; 가로 라인1과 세로 라인2에서 시작하여, 가로 라인5와 세로 라인6에서 종료하는 영역
			span을 사용하여 가로 끝과 세로 끝 위치를 정수만큼 확장함.		정수 / 정수 / span 정수 / span 정수	ex) grid-area: 2 / 1 / span 2 / span 3; 가로 라인2와 세로 라인1에서 시작하여, 가로로 2개 라인만큼 확장(가로 라인4)하고 세로로 3개 라인만큼 확장(세로 라인4) 영역
	자식요소의 쌓는 순서 변경	z-index	CSS의 z-index와 같은 역할을 하지만, Grid에서는 포지션 속성이 없어도 사용 가능함.		숫자(정수) 0(기본값)	ex) z-index: 1; z-index가 없으면 기본값이 0이므로 1을 지정하면 위로 올라감