그리드

• 2차원 레이아웃 구조 (row, column)

.container {
	border: 4px solid;
	display: grid;
	grid-template-rows: 100px 100px;
	grid-template-columns: 200px 200px 200px;
}

.container .item {
	border: 2px solid;
	font-size: 30px;
}

.container .item:nth-child(2) {
	grid-row: span 2;
}

Grid Containers

• display: grid, inline-grid

• grid-template-rows, grid-template-columns (명시적)

• grid-auto-rows, grid-auto-columns (암시적)
명시적으로 행과 열의 개수를 지정할 수 있는데,
그 범위를 벗어나는 아이템은 암시적인 영역에서 만들어진다.

• fr: fraction(공간의 비율)

• repeat 함수
실제 요소의 개수보다 많거나 적어도 된다.

.container {
	border: 4px solid;
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(8, 1fr); // 실제 요소의 개수보다 많거나 적어도 된다. 
}

• grid-auto-flow: row dense (기본값은 row)

• justify-content
grid-content 영역을 가로 방향으로 정렬한다. (행축 기반 정렬)
normal(기본값), start, center, end, space-between, space-around, space-evenly
normal은 stretch와 동일하다.

• align-content
grid-content 영역을 세로 방향으로 정렬한다. (열축 기반 정렬)
normal(기본값), start, center, end, space-between, space-around, space-evenly

• justify-items

• align-items
Grid Item이 있는 Cell에서 열축에 빈 공간이 있을 때 사용가능하다.
normal(기본값, stretch), start, center, end
space로 시작하는 속성은 없다.

• grid-gap: Grid Item 사이에 여백을 추가
grid-gap: 10px 40px;

• grid-template-areas

.container {
	border: 4px solid;
	display: grid;
	grid-template-rows: repeat(4, 100px);
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas: 
		"header header header"
		"main main aside"
	  ".    .    aside"
    "footer footer footer";
}

.container > * {
  border: 2px solid;
}

.container header {
	grid-area: header;
}
.container main{
	grid-area: main;
}
.container aside {
	grid-area: aside;
}
.container footer {
	grid-area: footer;
}

Grid Items

• grid-row

• grid-column

• Line 개념

• Grid item의 위치와 영역을 Line에 따라 조절할 수 있다.

• grid-row-start: 2, grid-row-end: 4 (grid-row: 2 / 4)
grid-column-start: 2, grid-column-end: 4 (grid-column: 2 / 4)
행의 2 번 라인에서 시작한다. 행의 4번 라인에서 끝난다.
열의 2 번 라인에서 시작한다. 열의 4번 라인에서 끝난다.

• grid-row-start: span 2
span은 확장을 의미한다. 기본값은 1

.container .item:nth-child(1) {
	grid-row-start: span 2;
	grid-column-start: span 3;
}



 
 

• justify-self, align-self
normal(기본값, stretch와 동일), start, center, end

• order
Grid-item의 순서를 지정. 기본값은 0

• 쌓임(겹침)
grid-row, grid-column으로 명시적 위치를 지정해주어야만 겹칠 수 있다.
z-index를 추가하여 순서를 조정할 수 있다. 기본값은 0