● [CSS] grid (부모에게 주는 속성)

● [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) 단위를 사용해서 비율로 넣을 수 있다.

1fr 1fr 1fr 1fr 1fr 씩 넣어준 것 repeat(5, 1fr)

3fr 7fr 로 넣어준 것

 

• 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를 활용해서 페이지를 만들어보았다.