● [CSS] grid (부모에게 주는 속성)
- display: grid;
- grid-template-columns
- grid-template-rows
- gap
- grid-auto-rows
- justify-items
- align-items
아래와 같이 먼저 큰 <div>안에 12개의 <div>가 있다고 설정해보았다. display는 block이다.
다음 display: grid를 넣고 설명을 진행해보겠다.
- grid-template-columns 는 가로로 몇개의 컨텐츠들을 줄세워 정렬할 것인지를 정할 수 있다.
- 단위는 px, % 등 모두 사용할 수 있지만 fr(fraction) 단위를 사용해서 비율로 넣을 수 있다.
- grid-template-rows 는 세로로 정렬된 칸마다의 비율을 줄 수 있다.
- 아래는 1fr 2fr 3fr 4fr 로 주었다. 4fr이후로는 지정된 값이 없어 1fr 1fr로 정렬된 것이다.
- gap 을 통해 각 칸마다 여백을 줄 수 있다.
- 가로 여백, 세로 여백도 따로 줄 수 있다. (ex. 10px 8px)
- grid-auto-rows 는 모든 칸의 높이를 줄 수 있다.
- 아래는 160px을 주었다. (확실히 flex보다 편한점이 있는 것 같다!)
- justify-items, align-items 는 flex속성과 비슷하게 x축 방향에서 시작되는 부분, y축 방향에서 시작되는 부분을 설정할 수 있다.
- 기본 값은 stretch 이며, start, center, end가 있다.
grid를 활용해서 페이지를 만들어보았다.