display: grid

- container에

.container {
    display : grid;
    grid-template-columns: 40% 60%;
}

 

- grid-template-columns: 4fr 6fr; -> 4:6으로 나눠갖는다. (fr: fraction)

40%, 60%하는 것과 같다. 너비가 40% 60%인 칼럼 두 개가 생긴다.

1st item 2nd item

34

56

순으로 배치된다. 

 

- grid-gap: 1rem;

여백을 만든다.

grid-template-columns가 40%, 60%일 때는 여백으로 인해 container 밖으로 아이템들이 삐져나온다. (스크롤이 생긴다)

4fr, 6fr일 때는 여백만 생길 뿐 container 안에 있다.

 

- grid-template-columns: repeat(3, 1fr)

= 1fr 1fr 1fr과 같다.

칼럼 3개

 

- 한 칼럼은 고정, 다른 칼럼은 늘어났다 줄어들었다 하고 싶을 때

container{

display: grid;

grid-template-columns: 200px 1fr;

}

 

- 컨텐츠 높이가 다를 때 행끼리는 자동으로 맞춰준다.

모든 열의 셀 높이를 똑같이 해주고 싶다면?

grid-auto-rows: 200px;

자동으로 최대 높이로 하고 싶다면?

grid-auto-rows: minmax(200px, auto) -> 최소한 200px씩 높이 확보, 컨텐츠 높이가 더 크다면 그 행은 더 길어진다

 

- 폰트 사이즈의 비율에 맞춰서 디자인된 수치는

grid-auto-rows: minmax(10em, auto) -> em을 써준다

 

- justify-items: 컨텐츠만큼 너비를 가지고 좌우 정렬

justify-items : start; -> 각 셀 내에서 왼쪽 정렬

justify-items: center : 가운데 정렬

justify-items : end -> 오른족 정렬

 

- align-items컨텐츠만큼 높이 가지고 상하정렬

align-items: start; -> 각 셀에서 위쪽으로 붙는다.

align-items: center

align-items: end -> 컨테이너 아래쪽으로 붙는다.

 

- 각각을 조정하고 싶을 때 각각의 item에 css 적용

ex. .item:nth-child(5) {

justify-self: start;

align-self: center;

}

 

- 칼럼 너비를 조정하고 싶을 때

각 아이템에

grid-column: 1/4 -> 축 1~4까지 차지하게 해주세요

 

- grid-row : 2/4 -> row를 2~4 차지하게 한다 

 

- 침범하게 하는 방법

grid-column과 grid-row를 둘 다  써주면 영역이 겹친다.

투명한 색이 겹치면 겹치는 색깔로 바뀐다.

 

[ 출처 ] 

스튜디오밀

https://www.youtube.com/watch?v=eprXmC_j9A4&list=WL&index=5&t=0s