Flex VS Grid

Flex VS Grid

Flex

1차원. 수평, 수직 영역중 하나의 방향으로만 레이아웃을 나눌 수 있다. ( 컨텐츠 )

개발자가 다양한 크기의 화면 내에서 반응형 요소를 적절하게 배치할 수 있다.

개발자가 동적 레이아웃의 여러 인스턴스를 만들고 컨테이너 내에서 콘텐츠를 손쉽게 정렬 할 수 있도록 한다.

 

Grid

2차원. 수평과 수직을 동시에 영역을 나눌 수 있다. ( 컨테이너 ) 

열과 행의 항목을 정렬하여 개발자가 데스크탑, 태블릿 및 스마트폰 디스플레이를 위한 큰 레이아웃과 전체 페이지의 렌더링 및 모양을 쉽게 제어할 수 있도록 한다.

그리드로 정의된 셀 내부에 배치된다.

전체 레이아웃을 만들고 정의하는 것은 여전히 css grid의 강력한 장점!

 

네이버클론코딩_그리드로 만들어봤다.

 

Grid의 문제점

IE11에서 일부 속성을 제외하고 지원한다. 

지원하지 않는 그리드 속성은 

grid-gap

grid-template-areas

 

 

벤더 프리픽스 (Vender Prefix)를 이용하면 인터넷 익스플로러11에서도 지원이 가능하다고 한다.

 

그러나 그리드를 IE11에서 호환되도록 하는 벤더 프리픽스는 복잡하고,

점점 퇴출되고 있는 인터넷 익스플로러 지원을 위해 인터넷 익스플로러용 벤터 프리픽스 구문을 배우기도 애매하다. 

 

그래서 벤더 프리픽스를 사용해 호환되는 코드로 변환 시켜주는 웹서비스를 사용하는 것을 권장한다고 한다!!

 

그게 바로 Autoprefixer

 

지원되지 않는 그리드 속성 2가지를 사용한 css 그리드 클래스를 복붙해서 넣으면 벤더 프리픽스가 적용된 css코드를 표시해 준다고한다.

 

 

 

 

 

 

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

https://blogpack.tistory.com/842

CSS 그리드(Grid) 인터넷 익스플로러 11 과 호환성 구현하기