Grid

Flexbox 와는 다르게 레이아웃을 두 방향으로 배치가 가능하다.

Flexbox를 완전 대체할 수는 없다.

 

구조

flex와 같이 container와 item으로 이루어져있다.

 

용어

grid track

grid의 행 또는 열

 

grid cell

grid item을 담고 있는 한 칸

 

grid line

grid cell을 구분하는 선

 

grid number

grid line의 각 번호

 

grid gap

grid cell 사이의 간격

 

grid area

grid line으로 둘러싸인 사각형 영역, 그리드 셀의 집합임

 

속성

초록색은 컨테이너 노랑색은 아이템

 

grid-template-rows

grid-template-columns

컨테이너의 grid track의 크기를 지정하는 속성

여러가지 단위 사용 가능. 섞어 쓸 수 있음.

grid는 기본적으로 컨테이너 내부를 꽉 채우려는 성질이 있음

*repeat() css 함수 1번 인자의 값만큼 2번인자 값을 반복한다. 1번 인자의 auto-fill, auto-fit이 들어가면 너비가 허용하는 한 최대한 셀을 채움

*minmax() css 함수 해당 row or column이 첫 번째 인자만큼의 최소값을 가지고, 두 번째 인자만큼의 최대값을 가진다.

 

gap(grid-gap)

row-gap

column-gap

그리드 셀 사이의 간격을 설정하는 속성임

gap은 행과 열 모두에 간격을 줌. (grid-gap은 예전 표기방식)

row-gap은 행 사이에만 간격을 줌

column-gap은 열 사이에만 간격을 줌

 

grid-auto-rows

grid-auto-columns

통제를 벗어난 grid track의 크기를 지정하는 속성임

 

grid-template-areas

grid-area로 설정한 영역이름들을 이용해 아이템들을 배치시키는 속성

... or none 을 쓰면 빈칸이다.

ex) 'header header header'

 

grid-auto-flow

그리드의 자동배치 알고리즘을 선택하는 속성이다. 기본은 row이고, 배치했을 때 공간을 꽉채울 것인지 등등에 따라 알고리즘을 선택하면 된다.

 

align-items

세로 방향 정렬에 관한 속성이다.

stretch(기본), start, center, end가 있다.

 

justify-items

가로 방향 정렬에 관한 속성이다.

stretch(기본), start, center, end가 있다.

 

place-items

위 두개의 속성을 축약한 속성으로 align-items, justify-items 순서로 설정한다.

ex) place-items: stretch, center => 세로방향을 늘리고 가로방향은 가운데 정렬

 

! 위의 세가지 속성은 각 셀 안에서의 정렬을 설정하는 것임에 주의하자 ex) 각 셀 안에서의 가운데

 

align-content

각 그리드 아이템들을 통째로 세로방향 정렬한다. 셀 기준 정렬이 아닌 컨테이너 기준 정렬임에 주의하자.

또한 컨테이너의 높이가 모든 그리드 아이템 높이의 합보다 커야한다.

space-between, space-around, space-evenly 값도 존재한다.

ex) align-content: end => 아이템들을 컨테이너 기준 제일 아래쪽으로 정렬한다.

 

justify-content

각 그리드 아이템들을 통째로 가로방향 정렬한다. 셀 기준 정렬이 아닌 컨테이너 기준 정렬임에 주의하자.

또한 컨테이너의 너비가 모든 그리드 아이템 너비의 합보다 커야한다.

 

place-content

place-items와 마찬가지로 축약속성이다.

 

====================================

 

grid-column-start, grid-column-end, grid-column

grid-row-start, grid-row-end, grid-row

grid number를 기준으로 해당 grid item 크기를 설정할 수 있다.

grid-column 이나 grid-row를 쓸 경우 3 / 5 (3번부터 5번까지) 같은 표현으로 설정할 수 있다.

또한 n번 부터 x개의 셀만큼 이라는 표현설정도 가능하다. ex) 3 / span 2 => 3번부터 2개의 셀만큼

겹치게 설정도 가능한데 이럴경우 겹치는 부분의 요소들은 생략되는 값이 없어야한다.

 

grid-area

영역이름을 설정하는 속성

여기에 설정된 이름을 grid-template-areas에 이용하여 아이템 배치가 가능하다

 

align-self

각 그리드 셀 기준으로 세로방향 개별 아이템 정렬에 사용되는 속성이다

stretch, start, center, end가 있다.

 

justify-self

각 그리드 셀 기준으로 가로방향 개별 아이템 정렬에 사용되는 속성이다

stretch, start, center, end가 있다.

 

place-self

위의 place-items와 같이 축약형 속성이다.

 

order

시각적 배치의 순서를 정하는 속성이다.

 

z-index

z축 정렬에 사용된다.