CSS grid 정리 및 flex와 차이점

grid

요소의 속성을 grid로 변경

display : grid

grid-template-rows

grid의 행의 개수 및 크기를 지정할 수 있다.

grid-template-rows : 1fr 2fr 200px  // 행에 대한 규격
grid-template-columns  : ~  // 열의 대한 규격

fr❓function(분수)의 약자, grid-template에서 사용할 수 있는 비율 단위

repeat(a,b)

grid-template 에서 사용할 수 있는 반복 함수 b 규격의 grid-template을 a개 생성한다.

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

grid-column / grid-row

grid-item이 얼마만큼의 영역을 차지할 지 정의한다. ex) grid-column : 1/3

grid-column은 grid-line의 번호

grid-row는 grid-number의 변호를 기준 으로 영역을 할당

.item1 { 
    grid-column: 1/3; // 가로 
    grid-row: 2/3; // 세로
    background: green;
}

flex와 grid의 차이점

Flex

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

Grid

• 큰 규모의 레이아웃 구성에 적합
• 레이아웃 구조가 확실하게 잡혀있는 경우, 효율적으로 반응형 디자인을 구현할 수 있음.
  
• 모든 브라우저에서 지원하지 않는다! ( 업데이트를 안한 브라우저를 사용할 경우 지원이 안됨 ). ** 사용가능한 요소를 검색해볼 수 있는 사이트 : https://caniuse.com/