[HTML&CSS] 04. 레이아웃과 포지셔닝 - Grid

Grid

 

복수의 자식 요소인 Grid Item과 그 상위 부모 요소인 Grid Container(그리드 컨테이너)로 구성

Grid는 정렬하려는 요소의 부모 요소에 『display: grid;』또는 『display: line-grid;』속성을 선언
『display: grid;』또는 『display: line-grid;』속성이 적용된 요소는 grid container가 되고, grid container의 자식 요소는 grid item

 

display에 grid를 주면 격자 형태(grid)로 만들 수 있음

 

 

1. 명시적 행/열(Track)의 크기를 정의

그리드 템플릿의 행 부분(가로)의 크기를 지정해 주는것

grid-template-rows: 100px auto 100px;

(전체 width 를 600으로 지정해주었다. )

grid 행을 첫 번째는 100px, 두 번째는 자동, 세 번째도 100px으로 지정

 

그리드 템플릿의 열 부분(세로)의 크기를 지정해 주는것

grid-template-columns: 100px auto;

(전체 height 를 600으로 지정해주었다.)

grid 열을 첫 번째는 100px, 두 번째는 자동으로 지정

 

2. grid-template-areas

영역(Area) 이름을 참조해 템플릿 생성

1. 명시적 행/열의 크기를 조정한 뒤 이를 수행

영역 이름을 설정할 경우 grid-row와 grid-column 개념은 무시됨

(1번의 결과에 영역 이름을 준 것임)

grid-template-rows: 100px auto 100px;
grid-template-columns: 100px auto;
grid-template-areas: "header header" "nav body" "footer footer";

가장 처음으로 header을 만들어야 함

 

3. grid-template

grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성

grid-template: repeat(3, auto)/repeat(2, auto);

 

그리드 라인(행/열) 사이 간격(Gutter)을 조정

gap: 10px;

 

17page...