CSS | 6-2. 레이아웃 Grid

 

 

Grid

 

Flex와 가장 큰 차이점은 2차원 레이아웃 시스템이라는 점입니다.

 

기본구조

1. 컨테이너 - 그리드 전체 영역

2. 아이템 - 아이템들이 grid 규칙에 의해 배치

3. 트랙 - grid의 행과 열

4. 셀 - grid 한 칸

5. 라인 - 셀을 구분하는 선

6. 번호 - grid 라인의 각 번호

7. 갭 - 셀 사이의 간격

8. 영역 (Area) - grid 라인으로 둘러싸인 사각형 영역

 

 

 

 

 

 

 

컨테이너

 

컨테이너에 적용하는 속성

.container {
	display: grid;
}

1. dispaly : gird | inline-grid 그리드의 시작

2. grid-template-rows, grid-template-columns: - 명시적 행과 열의 배치와 크기, 라인 이름도 정의 가능

• repeat (숫자, fr) : fr은 비율대로 크기를 나눕니다.
• minmax() : 최소값 최대값
• auto-fill
• auto-fit

3. grid-template-areas : 영역에 이름을 붙이고 이름을 이용해서 배치

4. grid-template: grid-tempate-xxx와 grid-template-areas의 단축속성

4. row-gap: px, column-gap: px - 그리드 셀 간격을 설정

5. gap: xxx-gap 단축속성

6. grid-auto-columns, grid-auto-rows - 그리드 형태를 자동으로 정의

7. gird-auto-flow: row | column | row dense | column dense - 아이템 자동배치

8. grid: grid-template-xxx와 grid-auto-xxx 의 단축속성

10. align-items: - 아이템을 세로 방향으로 정렬

11. justify-items: - 가로 방향 정렬

12. place-items: - align-items와 justify-items

13. align-content: - grid 아이템들을 통째로 정렬

14. justify-content: - 

15. play-content: 

 

 

아이템

 

아이템에 적용하는 속성

1. grid-column-start, grid-column-end - 아이템의 열 시작 위치와 끝 위치

2. grid-row-start, grid-row-end - 아이템의 행 시작 위치와 끝 위치

3. grid-column, grid-row - grid-column-xxx와 grid-row-xxx 단축속성 (시작위치 / 끝위치)

4. grid-area: - grid-row와 grid-column 단축 속성

1. align-self: stretch | start | center | end - 단일 그리드 아이템을 열 정렬

2. justify-self: stretch | start | center | end - 단일 그리드 아이템을 수평 정렬

3. place-self:  - align-self와 justify-self 단축 속성

4. order: 아이템들의 시각적 나열 순서

5. z-index: 아이템 쌓이는 순서

 

 

서브그리드

 

그리드 중첩

 

 

 

관련포스트

• CSS | 1. 기초
• CSS | 2. 구문과 적용 방법
• CSS | 3. 선택자
• CSS | 4. 폰트 텍스트 관련
• CSS | 5. 박스모델
• CSS | 6. 레이아웃
• CSS | 6-1. 레이아웃 Flex
• CSS | 7. 조합자와 가상선택자
• CSS | 8. 구체성과 상속
• CSS | 9. 미디어 쿼리
• CSS3 | 10. 모듈과 변형