TIL - 46

grid

• 2차원(행,열) 레이아웃 제공
• 항상 부모태그(container)과 자식(item)태그가 짝으로 있어야함.

.container {
display: grid;
}
-> 수직(세로)으로 쌓인다
.container {
display: inline-grid;
}
-> 수평(가로)으로 쌓인다.(마치 inline을 사용한 것 처럼) 

gird-template-columns / grid-template-rows

• 열(세로)의 크기 지정 / 행(가로)의 크기 지정
• repeat(몇번 반복하는 것,크기) 을 통해서 중복되는 크기를 지정할 수 있음

 grid-template-columns: repeat(3, 1fr);
 -> fr은 크기의 비율 

grid로 layout을 하는 두가지 방법

1. grid-template-colunms , grid-template-rows , grid-template-areas를 부모요소로 지정해서 grid-template-areas에 지어준 이름을 자식요소로 grid-area: 이름 을 입력한다.

2. grid-template-colunms , grid-template-rows 지정후, 자식요소로 가서 자식선택자:nth-child(몇번째) { grid-column: 1을 n번째까지 늘린다}

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 150px 150px;
  grid-auto-rows: 100px; -> 원래 지정한 행 밖으로 나갔을때 크기
  grid-auto-columns: 100px; 원래 지정한 열 밖으로 나갔을때 크기
}
.item:nth-child(3) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}