[CSS] Grid

Flex vs Grid

두 디스플레이 속성은 컨테이너 > 아이템으로 기본 형태는 같다. 하지만 Flex는 direction에 따라 행, 열 중 한 방향에서의 배열을 다루고 Grid는 행, 열의 배열을 동시에 다룬다는 점이 큰 차이이다. 그런 측면에선 Grid가 더 상위의 개념이라고 볼 수도 있을 것 같다.

→ 전체적인 페이지의 레이아웃은 Grid, 요소들은 Flex를 이용하면 효율적이다.

 

Grid 속성

Container

grid-template-columns : 폭너비 폭너비 폭너비;

• 폭에 사용할 수 있는 단위는 px, fr, auto

grid-template-columns:1fr 1fr 1fr; grid-template-columns:200px 1fr; grid-template-columns:200px 200px 100px; //fr은 fraction의 약어로 비율을 나타낸다. 

 

grid-template-rows: 높이 높이 높이;

 

(+ 참고

💡

repeat(3, 1fr) = 1fr 1fr 1fr

💡

minmax(최소값, 최대값)

💡

repeat(2, minmax(80px, auto))

)

grid-auto-columns: template-columns의 통제에서 벗어난 columns 다루는 속성

grid-auto-rows: template-rows의 통제에서 벗어난 columns 다루는 속성

display: inline-grid

gap: 셀(행,열)간격

row-gap: 행간격

column-gap: 열간격

 

Item

• 영역지정(선 기준)

grid-column: 1/3;

grid-row: 1/4;

 

• 영역지정(직관적인)

grid-template-areas

.container{ 	grid-template-areas: 		'header header header' 		'  .      b      .   ' 		'  c      c      .   '; } .item:nth-child(1) { 	grid-area: header; } .item:nth-child(2) { 	grid-area: b; } .item:nth-child(3) { 	grid-area: c; }

• 위치지정

order : 숫자가 클수록 뒤쪽으로(지정안하면 0)

 

---

예제.

•  
  그리드 활용해서 만들어본 얀 치홀트 디자인

https://github.com/cheolship/css-grid-practice

https://practice-css-grid.netlify.app

Grid-practice

https://flexboxfroggy.com/#ko

Flexbox Froggy

개구리 게임으로 그리드 연습하기.