css grid
설명
- CSS 그리드 레이아웃(Grid Layout)은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있습니다. 이 문서에서는 CSS 그리드 레이아웃 및 CSS 그리드 레이아웃 레벨 1 명세서에 포함된 새로운 기술 용어를 소개합니다. 이번 개요에 소개된 기능은 나머지 안내 문서에서 자세히 설명합니다.
mozila
가이드
- 레이아웃 디자인
- 웹 레이아웃 기술 발전사
- CSS Grid 기술 개발 이야기
- CSS Grid 레이아웃 모듈
- 한 눈에 살펴보는 Grid 용어
- 거꾸로 살펴보는 그리드
- CSS Grid 사용 가이드
- CSS Grid 활용 가이드
- Box 정렬 가이드
- IE를 위한 개발 환경 구성
- CSS Grid 레퍼런스
-
키노트 컨퍼런스 2018 - 앤디 클락의 CSS Grid 레이아웃
-
이 설명을 보고 이해했다.
grid and flex 설명
그리드 레이아웃과 다른 레이아웃 방법의 관계: Relationship of grid layout to other layout methods
- CSS 그리드 레이아웃과 CSS 플랙스박스(Flexbox) 레이아웃의 기본 차이점이라면, 플랙스박스는 한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었다는 점입니다. 하지만, 그리드는 행과 열 모두를 염두에 둔 2차원적 레이아웃을 고려해서 설계되었습니다. 그러나 두 기술은 몇 가지 공통된 면모를 공유하고 있어서, 이미 플랙스박스 사용법을 익히셨다면 그리드를 이해하는 데도 도움이 될 만한 둘 사이의 유사점을 목격하실 수도 있습니다.
- 플랙스박스는 좀 더 콘텐츠에 초점이 맞춰져 있습니다. 발췌 링크
- 그리드는 레이아웃을 먼저 고려하게 됩니다 발췌 링크
- flexbugs : flex bugs, flex not working
글들
support IE11
- IE 11 - CSS Grid - SASS mixins
- SCSS mixins to provide CSS grid support to IE11
- CSS Grid Example (also working in IE 11)
- CSS Grid Layout Sample(IE/Edge available version)
- Supporting CSS Grid in Internet Explorer
autoprefixer
- css 를 변환해준다
css 를 ie 지원 코드로 변경