[CSS] Grid CSS

Grid CSS

column Gap 이랑 Row Gap을 합쳐서 써주면 gap: 00px; 으로 나타낼 수 있다. 

 

 

* grid-template-columns 

.container {
	grid-template-columns: 40px 50px auto 50px 40px;
}

 

공백으로 구분된 값 목록으로 그리드의 열과 행을 정의한다. 값은 트랙 크기를 나타내고 그 사이의 공간은 grid line 격자선을 나타낸다. 

 

40px

50px

auto

50px

40px

 

---

* repeat 

.container {
	grid-template-columns: repeat(5, 10px)
}

 

10px

10px

10px

10px

10px

 

---

* 1fr 

fr = fraction 1fr은 사용 가능한 공간의 1 부분이다. (사용 가능한 공간에 대한 비율) 

 

if 가로 넓이가 500px이라고 하면 한 공간당 100px

 

1fr

1fr

1fr

1fr

1fr

 

.container {
	width: 800px
    grid-template-columns: 300px 10% 1fr 1fr;
}

 

300px

10% 80px

210px

210px

 

전체 800px  (380 px + 210px + 210px)

380px 하고 남은 넓이를 1fr씩 나눠가진다.