grid

---

grid

flex는 1차원으로 조정하는 것이라면, grid는 2차원으로 조정하는 레이아웃 시스템.

보통 전체적인 틀을 grid로, 세부적인 틀을 flex로 잡는 게 좋아 보인다.

(header, footer, section 등은 grid로, grid로 잡은 틀 속에 디테일은 flex로)

• grid container - display: grid; 를 적용하는 grid의 전체 영역.
• grid item - grid container의 자식 요소.
• grid track - grid의 행 또는 열.
• grid cell - grid의 한 칸을 가리키는 말.  grid item 하나가 들어가 있는 가상의 공간.
• grid line - grid 셀을 구분하는 선.
• grid number - grid line의 각 번호.
• grid gap - grid 셀 사이의 간격
• grid area - grid 라인으로 둘러싸인 사각형 영역. 그리드 셀의 집합. 셀 여러 개 합치기 가능.

---

컨테이너에 적용하는 속성

display: grid;

아이템들이 block 요소라면 변화는 없다.

inline-grid는 inline-block과 비슷하다.

 

grid-template-rows/columns

행/열의 배치를 결정.

grid-template-rows: 100px 200px 300px;
grid-template-columns: 200px 200px 200px;
//px로 할 시

grid-template-rows: 1fr 2fr 3fr;
grid-template-columns: 2fr 2fr 2fr;
//반응형으로 할 시

3x3으로 영역이 나뉘게 된다.

 

repeat 함수

repeat(반복횟수, 반복 값) 

grid-template-rows: repeat(3, 1fr)
//위와 아래는 같다.
grid-template-rows: 1fr 1fr 1fr

 

minmax 함수

minmax(최소크기, 최대크기)

최대크기를 auto로 한다면 크기에 맞게 자동으로 늘어난다. (메인 축이 row일 때, rows -> 높이 columns -> 너비)

 

auto-fill, fit

column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

grid-template-columns: repeat(auto-fill, minmax(25%, auto));

열의 최소 너비가 25%이므로 행 하나에 4개의 아이템이 들어간다. 아이템 개수가 모자르면 공간이 남게 된다.

여기서 auto-fit을 쓰게되면 남는 공간을 채운다.

gap

그리드 셀 사이의 간격을 설정

row-gap, column-gap을 따로 설정할 수 있지만, gap을 이용해 두 가지를 한꺼번에 적용가능 하다.

gap :20px;
/* row-gap: 20px; column-gap: 20px; */

gap : 10px 20px;
/* row-gap: 10px; column-gap: 20px */

 

grid-auto-columns/rows

grid-template-columns/rows의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성.

column이나 row 개수를 미리 알 수 없을 때 사용. 알아서 채워준다.

 

align-items

아이템들을 메인 축의 수직 방향(세로 방향)으로 정렬한다. 컨테이너에 적용

• stretch - 기본 값. 셀을 가득 채운다.
• start - 맨 위부터 아이템의 크기만큼.
• center - 가운데에 아이템의 크기만큼.
• end - 맨 아래부터 아이템의 크기만큼.

justify-items

아이템들을 가로 방향으로 정렬한다. 컨테이너에 적용.

align-items왜 동일함.

 

place-items

align-items와 justify-items를 같이 쓸 수 있는 단축 속성.

place-items: start center;
/* align-items: start; justify-items: center; */

 

 

 

---

아이템에 적용하는 속성

grid-(column/row)-(start/end/)

grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정한다.

grid-column 1/3으로 적용하면, 1칸이 아니라 2칸을 차지한다.

grid line의 번호는 1번부터 시작.

grid-column-start: 2;
grid-column-end: 4;
gird-row-start: 1;
grid-row-end: 2;

grid-column: 2 / 4;
grid-row: 1 / 2;

grid-column: 2 / span 2;
grid-row: 1 / span 1

 

grid-template-areas

영역 이름으로 그리드 정의. 각 영역에 이름을 붙이고, 이를 이용해서 배치하는 방법.

gird-template-areas:
	"header	header	header"
    	"a	main	b     "
        ".	.	.     "
    	"footer footer footer ";

.header {grid-area: header;}
.sidebar-a {grid-area: a;}
.main {grid-area: main;}
.sidebar-b {grid-area: b;}
.footer {grid-area: footer;}

// 이름을 따옴표로 감싸지 않는다.

header
sidebar-a	main	sidebar-b
			footer

 

grid-auto-flow

자동 배치. 아이템이 자동 배치되는 흐름을 결정하는 속성.

dense - 빈 셀을 채워준다. row와 column에 따라 기준이 달라진다.

 

align-content / justify-content / place-content

아이템 그룹 세로/가로 정렬. gird 아이템들의 높이/너비를 모두 합한 값이 grid 컨테이너의 높이보다 작을 때 통째로 정렬.

space-beteween/around/evenly 적용가능.

place-content: align-content; justify-content;

 

align-self / justify-self / place-self

개별 아이템을 세로/가로 축 방향으로 정렬.

place-self: align-self; justify-self;

order

배치순서. 작은 숫자일 수록 먼저 배치. 시각적 순서일 뿐이다.

 

z-index

z축 정렬. 숫자가 클 수록 위로 올라온다.

 

참고

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자