2차원적인 구조. row와 column을 동시에 가지고 있음

display : flex 처럼 display : grid 로 바꾸어야 함

• grid-template-rows/ grid-template-columns : grid의 행의 개수 및 크기를 지정할 수 있다

  grid-template-rows:1fr 2fr 200px
  grid-template-columns:1fr 2fr 200px
  

  grid-template-rows/ grid-template-columns 를 사용할 때 값을 설정하는 방법

  • fr : fraction의 약자, grid-template에서 사용할 수 있는 비율 단위

    grid-template-columns:repeat(4,1fr) = grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns:3fr repeat(2,1fr 200px) = grid-template-columns:3fr 1fr 200px 1fr 200px;
    

  • repeat(a,b) : grid-template에서 사용할 수 있는 반복함수 b규격의 grid-template을 a개 생성한다

• grid-column / grid-row: grid-column은 grid-line의 번호, grid-row는 grid-number의 번호를 기준으로 영역을 할당

  /*시작지점이 1번 넘버, 끝지점이 3번 넘버 */
  grid-column: 1 / 3; 
    
  /*시작지점이 2번 넘버, 끝지점이 3번 넘버*/
  grid-row: 2 / 3;	
    
  /*1부터 시작해서 템플릿기준 2칸을 차지한다*/
  grid-column: 1 / span 2; 
  

---

Flex vs Grid

flex

• 비교적 작은 단위의 레이아웃 구성에 적합
• 작업 유동성이 높기 때문에, 디자인이나 기획이 확실하게 잡히지 않아 변경 가능성이 있는 경우에 적합

grid

• 큰 규모의 레이아웃 구성에 적합
• 레이아웃 구조가 확실하게 잡혀있는 경우, 효율적으로 반응형 디자인을 구현할 수 있음