CSS #5

1. Grid

1) 개요

• 일반적으로 웹페이지는 행과 열로 구성된 grid 형식을 따름
• flexbox는 1차원인 행 또는 열만 제어가 가능
  grid는 행과 열을 같이 제어할 수 있다 !

2) 구성 요소

• 반드시 부모 (grid container) / 자식 (grid item) 관계가 성립되어야 한다
• 중첩 가능

(1-1) grid container

• display : grid; 를 적은 태그가 container(부모)가 된다

(1-2) Container에서 사용 가능한 속성

1- item 배치
grid-auto-flow: row | column;
row는 기본 : 행으로 추가됨
column은 열로 추가됨

2- 열 개수 지정
grid-template-colums: 값 값 값 값;
값의 단위 - px, % (기준은 container), rem, auto (나머지 영역 차지), fr (fraction)
예>

grid-template-columns: 20px  20px  20px  20px; 
grid-template-columns: repeat(4, 20px); /* 20px 크기 4개 */
grid-template-columns: 20%  20%  20%  20%; /* container 기준 */
grid-template-columns: repeat(4, 20%); 
grid-template-columns: 20%  20px  20px  20%;
grid-template-columns: 20px  20px  20px  auto;
grid-template-columns: 20px  20px  20px  1fr;
grid-template-columns: 20px  minmax(10px,100px)  20px  auto;

3- 행 개수 지정

grid-template-rows: 값 값 값 값;

4- 간격 설정 (gap)

grid-row-gap: 10px;
grid-column-gap: 20px;
grid-gap: row-gap column gap; (축약 표현식)

5- container, 셀 내의 item 정렬

justify-items: flex-end | center |...
align-items: flex-end | center |...

6- container 정렬

justify-content: flex-end | center |...
align-content: flex-end | center |...

7- 자동으로 row 추가

grid-auto-flow: row (디폴트)

grid-auto-rows: 값; -> 자동으로 추가되는 모든 행의 height가 동일해짐

(2-1) grid item

• grid는 행으로 추가된다 (열 한 개, 행 여러 개)
  예>

.container{
	display:grid;
}

<div class="container">
	<div>item</div>
	<div>item</div>
	<div>item</div>
	<div>item
		<div>item2</div> <== grid item 아님. 자손은 제외
	</div>
	<div class="container2"> <== 중첩 가능
		<div>item</div>
	</div>
</div>

(2-2) item에서 사용 가능한 속성

1- Container에서 설정된 justify-items 와 align-items 재정의

.item-1{
	justify-self: center|flex-start
	align-self: center|flex-start
}

2- 원하는 위치 번호로 배치

.item-3{
	grid-column-start:2
	grid-column-end:4

	grid-row-start:1
	grid-row-end:3
}

• 축약 표현식

grid-column: start / end;
grid-row: start / end;

3- 원하는 위치, 개수로 배치

.item-3{
	grid-column-start: 2
	grid-column-end: span 3;

	grid-row-start: 1
	grid-row-end: span 2;
}

4- 원하는 셀 이름으로 배치

• 가. 셀 이름 지정 (Container 에서 지정)

.container{
grid-template-areas: "header header header1 header1"
                     ".  .  main main"   <== 셀명을 생략가능. 하지만 . 지정해서 갯수는  반드시 일치해야 됨
					"footer1 footer2 footer3  footer4" 
}

• 나. 요소 배치 (item 속성)

.item-1{
	grid-area: main;
}
.item-2{
	grid-area: header;
}