CSS 레이아웃 - Grid

##GRID

 

위 스타일을 만들어 봅시다

 

첫번째로는 , flexbox를 세개 만들고 넣어주면 되겠죠

 

두번째는,  width를 각각 33%로 설정하고 flex-wrap을 주면 되겠죠

조금 번거로워 보이죠?

플렉스는 한방향 이기 때문에 그렇습니다.

그럼 양방향으로 배치를 하면 더 쉬울까요??

이걸 가능하게 해주는 게 ‘그리드’ 입니다.

그리드는 2차원 영역에서 왼쪽 -> 오른쪽, 위 -> 아래 방향으로 배치를 가능하게 해주죠

여기서 칸을 나누는 선을 그리드 라인 

각 칸 (요소배치공간) 을 그리드 셀 이라고 합니다

그리드를 설정하면 각 셀에 요소 배치, 그리드 크기 조절, 사이 간격 등을 플렉스와 마찬가지로 설정할수 있습니다. 

또한 모든 그리드를 채우지 않아도 가능하죠

---

 

#그리드 나누기 (기본 작성법)

 

가장 큰 틀인 컨테이너를 써줍니다.

컨테이너 css 에 차례로 작성해 줍니다.

 

그럼 2행 3열 100px씩 커지는 그리드를 만들어보죠 

자꾸 혼동이 오니까, 간단히 맨위칸을 colums로 계산하고

다음부터 rows가 온다고 생각해보죠

 

참고로 한번에 몰아쓰기도 가능합니다 (행 열 순)

#유연한 크기와 유용한 함수들 

 

컨테이너의 width가 그리드에 부족하거나 크면 어떻게 될까요? 

부족하면 옆으로 튀어 나오고

크면 옆에 빈공간이 남습니다.

이런 현상을 해결 하기 위한 px대신 쓰는 단위들이 있습니다. 

 

*fr (fraction) 

각각의 비율로 표현 가능하게 해줍니다. 

(grid-template-rows : 1fr 1fr 1fr;)  → 1:1:1 의미

 

*minmax (minpx, maxpx)

최소 px 부터 ~ 최대 px를 정해놓는것 입니다.

(grid-template-rows : minmax( 200px, 300px) 100px 100px )

*minmax 안에 fr 도 사용 가능합니다 

  **최대에만 사용가능합니다 ! 

(grid-template-rows : minmax( 200px, 1fr) minmax( 200px, 1fr))

 

*유용코드

만약에 10개의 그리드를 같은 비율로 지정하려면 어떻게 할까요? 

배운대로 하면 

grid-template-rows : 1fr 1fr 1fr …

열번을 써야겠죠

이걸 대체해주는 고마운 함수가 있습니다

repeat (10, 1fr ) 을 써주면 위와 동일한 결과를 얻을수 있습니다.

#간격넣기

이전에 배웠던 플렉스와 동일하게 

gap 활용하면 됩니다. 

16px의 간격이 잘 들어간 것을 볼수 있습니다. (세로 가로 순서입니다)

#크기 미리 지정해두기

 

앞으로 그리드가 몇개가 배치 될지 모를 경우, 한번에 값을 정해 놓는 방법이 있습니다.

columns의 값을 정하고 row값은 자동으로 넣는 방법인데요

칼럼값을 1:1:1 3열로 생성하고 앞으로 나올 모든 행은 100px로 만드는 것입니다.

 

추가로

grid-auto-rows : 100px 200px 300px ; 

이렇게 쓰면 3가지 크기가 반복되게도 할 수 있습니다.

#원위치, 원하는 크기 설정하기 하는 

 

미리 그리드를 설정하고 개발자도구로 그리드를 클릭하면 나눠놓은 그리드를 확인할수있습니다.

각각의 선들은 

‘그리드라인’ 이라고 하고 1번부터 번호가 붙습니다. 

반대로는 -1이고 동일하게 개발자도구로 확인 가능합니다.

그림에서 마지막 행은 5번이자 -1번 인거죠

# 그리드 번호에 따라 배치

 

그린을 옮겨보죠

green css에 grid-row 와 grid-column 을 먹이면 해당 위치로 이동이 가능합니다.

그외 블루는 차례로 다시 배치 됩니다.

 

 

다양하게 배치를 해보죠 

  /를 통해서 다양한 셀에 배치가 가능합니다

 

여기서 주의해야할 점이 

해당하는 숫자는 셀이 아닌 그리드라인의 숫자입니다.

 

span을 통해서도 가능한데요, 밑 그림은 row3부터 2칸 / 칼럼 2부터 3칸을 의미합니다. 결과물은

위와 동일하겠죠

# 이름으로 배치 

요소에 이름을 붙여서도 배치가 가능하다

이름은 

grid-area 를 통해 붙일수 있다.

빨강은 grid-area : r  ;  그린은 grid-area : g ; 파랑은 grid-area : b ; 

이렇게 미리 이름을 작명하고 이름을 통해서 배치하는 것이다

 

배치를 해보면

요소를 감싼 박스에 

display : grid

grid-template : 1fr 1fr / 1fr 1fr;  (미리 그리드 나눠줘야함)

grid-template-areas :  

  “r g”

“b g”

-> 이런식으로 간단한 표현가능

* 이거 만드려면 각 흰색이 다르기 때문에 각각 w1 w2 w3 w4 로 작명 후 배치 해줘야지만 

    구분이 되면서 배치가 된다.