[CSS] Grid

 

 

 

앞서 공부한 Flexd와 Grid의 큰 차이는 아래와 같다. Flex보다 더 복잡한 레이아웃 표현이 가능하다.

• Flex는 한 방향 레이아웃 시스템(1차원)
• Gird는 두 방향(가로-세로) 레이아웃 시스템(2차원)

 

 
 Flex와 마찬가지로 컨테이너와 아이템이 있으면 된다.
부모 요소인 div.container를 Grid Contaienr, 자식요소인 div.item들을 Grid Item이라고 부른다. 컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각 아이템들이 어떤 형태로 배치되는 것. 
Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작되며 1. 컨테이너에 적용하는 속성, 2. 아이템에 적용하는 속성 두 가지로 나뉜다.
 

Grid 관련 용어 정리

• 그리드 컨테이너 (Grid Container)
  display: grid를 적용하는, Grid의 전체 영역입니다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 됩니다. 위 코드 <div class=”container”></div>가 Grid 컨테이너예요.
• 그리드 아이템 (Grid Item)
  Grid 컨테이너의 자식 요소들입니다. 바로 이 아이템들이 Grid 규칙에 의해 배치되는 거예요. 위 코드에서 <div class=”item”></div>들이 Grid 아이템입니다.
• 그리드 트랙 (Grid Track)
  Grid의 행(Row) 또는 열(Column)
• 그리드 셀 (Grid Cell)
  Grid의 한 칸을 가리키는 말이에요. <div>같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 됩니다.
• 그리드 라인(Grid Line)
  Grid 셀을 구분하는 선입니다.
• 그리드 번호(Grid Number)
  Grid 라인의 각 번호입니다.
• 그리드 갭(Grid Gap)
  Grid 셀 사이의 간격입니다.
• 그리드 영역(Grid Area)
  Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합이에요.

 

Grid 컨테이너에 적용하는 속성

• display: grid;
• display: inline-grid;
  • 이는 block과 inline-block의 관계와 마찬가지로 아이템 배치와 관련 있다기 보다는, 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값이다.

 

그리드 형태 정의

컨테이너의 grid 트랙의 크기들을 지정해주는 속성이다. 

• grid-template-rows : 행(row)의 배치
• grid-template-colums : 열(column)의 배치

속성값으로 여러 단위를 사용할 수 있고  섞어서도 쓸 수 있다.

• fr : fraction, 즉 숫자 비율대로 트랙의 크기를 나눈다. (1fr 1fr 1fr = 1:1:1)
• repeat(반복횟수, 반복값) : 반복되는 값을 자동으로 처리할 수 있는 함수 (repaeat(3, 1fr) = 1fr 1fr 1fr)
• minmax(최소값, 최대값) : 최소값과 최대값 지정할 수 있는 함수. (minmax(100px, auto) = 최소 100px, 최대 자동(auto)으로 늘어나게)
• 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채우는 방식
  • auto-fill : 지정한 개수보다 모자라면 공간이 남음
  • auto-fit : 지정한 개수보다 모자라면 공간을 채움

 
[예시 코드]

.container {
	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */

	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
	/* grid-template-rows: 100px 200px auto */
}

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}

 

간격 만들기

그리드 셀 사이의 간격을 여러 단위(px, em 등)로 표현하여 설정

• row-gap : 행의 간격
• column-gap : 열의 간격
• gap: (row-gap) (column-gap)을 차례로 써서 정의하는 축양형

 

그리드 형태를 자동으로 정의

grid-template-column/rows 의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성. 여기서 통제를 벗어난 코드란 미리 개수를 알 수 없는 경우를 말한다. 

• grid-auto-columns
• grid-auto-rows

grid-auto-columns/rows 속성을 써주면, 굳이 횟수를 지정해서 반복할 필요 없이 알아서 처리 된다. 즉 grid-template-rows로 미리 세팅해둔 것이 없는 경우 모든 row들은 grid-template-rows의 통제를 벗어난 row가 되는 것이고, 이를 grid-auto-rows가 처리하는 것이다.
 
 

Grid 아이템에 적용하는 속성

각 셀의 영역 지정

• grid-column-start
• grid-column-end
• grid-column
• grid-row-start
• grid-row-end
• grid-row

 

영역 이름으로 그리드 정의

• grid-template-areas
  • 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해 배치하는 직관적인 방법이다. 아래 형태처럼 각자 차지하는 셀의 개수만큼 해당 위치에 이름을 써주면 된다. 각 셀마다 공백을 하나씩 넣어 구분하며 빈칸은 마침표 또는 'none'을 사용한다.
• grid-area 
  • 각 영역의 이름 매칭 : 해당 아이템 요소에 grid-area 속성으로 이름 지정.

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름 값에 따옴표가 없는 것에 주의하세요 */

 

그 외

• grid-auto-flow : 아이템이 자동 배치되는 흐름을 결정하는 속성
• align-items / justify-items : (stretch / start / center / end) : 세로 / 가로 방향 정렬
• place-items (align-items justify-items) : align-items, justify-items의 단축 속성
• align-content / justify-content : 아이템 그룹 세로 / 가로 정렬
• place-content:  (align-content justify-content) : align-content, justify-content의 단축 속성
• align-self / justify-self : 개별 아이템 세로 / 가로 정렬
• place-self : align-self, justify-self 의 단축 속성
• order : 각 아이템들의 시각적 나열 순서를 결정하는 속성, 숫자값이 들어가며 작을 수록 먼저 배치됨.
• z-index : Z축 정렬로 숫자가 클 수록 위로 올라온다(position에서의 z-index와 동일)

 
 
 
출처:

https://studiomeal.com/archives/533