[how to prove it] 2장 6
- 그리드 레이아웃: 열과 행을 만들어서 요소가 그 내부를 채우도록 하는 것(한 셀 혹은 여러 셀)
- 그리드의 크기는 명시할 수도 있고 콘텐츠에 맞게 자동 조정되도록 할 수 있음
- 개발 과정에서 플렉스와 다르게 벤더 프리픽스가 아니라 다른 방식으로 함
- 개발자가 실험은 할 수 있지만 브라우저에 적용되지 않는 형태
- 개발 기간은 길었지만 한번에 제대로 사용할 수 있는 버전으로 그리드 구현을 사용할 수 있게 됨
- 실험적 기능 사용하기(chrome://flags/)
간단한 그리드 만들기
- display: grid라고 한 요소가 컨테이너가 됨(자식이 그리드 요소)
- grid 컨테이너는 display:block처럼 width를 100% 채운다(자식을 포함하는 만큼만 채우고 싶다면 display:inline-grid)
-
grid-template-columns
-
grid-template-rows
-
fr: fraction unit: flex-grow(flexbox)처럼 동작함
-
grid-template-columns: 1fr 1fr 1fr => 크기가 같은 3개의 열
-
px이나 em 등 다른 단위 사용 가능
-
grid-gap
-
셀 사이 여백 공간 정의(개별 정의 가능)
- grid line - 그리드의 선
- grid track - 인접한 두 그리드 선 사이의 공간(가로 트랙, 세로 트랙)
- grid cell - 그리드의 단일 공간
- grid area - 하나 이상의 셀로 구성된 직사각형 공간
* 2개의 열, 4개의 행
- 그리드를 사용한다고 flexbox가 필요없어 지는 것은 아님
- 이전 장에서 하나의 플렉스박스를 사용하여 열을 정의하고 그 안에 다른 플렉스박스를 중첩하여 행을 정의 했음 => 그리드를 사용하려면 html을 중첩 구조가 아니라 평평하게 만들어야 함
* 헤더, 메뉴, 메인, 사이드 바2개를 그리드 항목으로 배치
-
스타일 추가 .container { display: grid; grid-template-columns: 2fr 1fr; => 첫번째 열이 두배 grid-template-rows: repeat(4, auto); => repeat을 통해 4개 반복, 높이는 컨텐츠에 따라 자동으로 커짐 grid-gap: 1.5em; max-width: 1080px; margin: 0 auto; }
-
그리드 라인의 넘버링
* 이 넘버링을 이용해 어디부터 어디까지 채울지 정할 수 있음
-
헤더와 탐색을 상단에 배치하는 방법? header, nav { grid-column: 1 / 3; => 전체 너비 grid-row: span 1; => 하나의 그리드 트랙(1), 시작과 끝행이 없으므로 자동 배치(span) }
-
flexbox와 함께 사용
- 그리드와 플렉스 박스는 상호 보완 관계임
- 차이: 플렉스 박스는 1차원, 그리드 레이아웃은 2차원
- 차이2: 플렉스 박스는 컨텐츠의 바깥에서 작동하지만 grid는 레이아웃의 안에서 작동함 => 그렇기 때문에 플렉스 박스는 크기를 정하지 않으면 컨텐츠의 크기에 맞게 조정됨 => 그러나 그리드는 요소가 트랙의 크기에 영향을 미치고 이는 즉 같은 트랙의 다른 요소의 크기에 영향을 미침
-
flexbox: 같은 행에 있는 요소들의 정렬에 적합
-
grid: 2차원이기 때문에 트랙간의 정렬에 적합함
-
크기의 차이 때문에 메뉴 같은 경우는 grid보다 flexbox가 적합 (글씨 길이에 따라 조정되는 크기)
-
페이지에서 플렉스 박스를 사용하면 좋은 곳: 메뉴나 price number
-
상위수준 스타일을 grid로 바꾼 것을 제외하고는 이전과 동일한 스타일 적용
-
결론
- 디자인에 2차원으로 항목을 정렬해야 하는 경우 그리드를 사용
- 단방향 흐름만 고려할 때는 플렉스박스를 사용
- 페이지의 상위 레이아웃에는 그리드, 각 그리드 영역 내의 특정 요소에는 플렉스박스가 적합할 때가 많음