CSS Grid Layout Guidebook
  • 레이아웃 디자인
  • 웹 레이아웃 기술 발전사
  • CSS Grid 기술 개발 이야기
  • CSS Grid 레이아웃 모듈
  • 한 눈에 살펴보는 Grid 용어
  • 거꾸로 살펴보는 그리드
  • CSS Grid 사용 가이드
    • CSS Grid 속성 요약
    • Grid 컨테이너
    • Grid 아이템
    • Grid 템플릿 행/열
    • Grid 템플릿 영역
    • Grid 템플릿 속기형
    • Grid 거터
    • Grid 아이템 배치
      • 라인 기반
      • 영역 기반
      • 순서 정렬
    • Grid 정렬
      • justify-content
      • align-content
      • justify-items
      • align-items
      • justify-self
      • align-self
    • Grid 트랙 크기 자동 설정
    • Grid 자동 흐름 설정
    • Grid 자동 반복 채움/맞춤
    • Grid 자동 배치 패킹 설정
    • Grid 속기형 속성
    • fr 단위
    • repeat() 함수
    • minmax() 함수
  • CSS Grid 활용 가이드
    • 정형 그리드 레이아웃
      • Gallery Grid
      • 12 Column System
      • 3 Column Grid
    • 비정형 그리드 레이아웃
      • Wanderlust Life Jewellery
      • Rel Acoustics
  • Box 정렬 가이드
  • IE를 위한 개발 환경 구성
    • CSS Grid 호환성 테이블
    • Grid × IE 참고노트
    • 개발도구 레퍼런스
  • CSS Grid 레퍼런스
  • 키노트 | 컨퍼런스 2018
  • 앤디 클락의 CSS Grid 레이아웃
Powered by GitBook
On this page
  • 모듈
  • 개발 상황
  • 브라우저 지원율

CSS Grid 레이아웃 모듈

PreviousCSS Grid 기술 개발 이야기Next한 눈에 살펴보는 Grid 용어

Last updated 6 years ago

모듈

CSS Grid 레이아웃 모듈 레벨 1 표준 문서는 Grid의 개념 및 등장 배경, 사용 방법 등을 기술하고 있습니다.

개발 상황

Grid의 현 개발 상태는 CR(Candidate Recomendation, 표준 입후보)입니다. 워킹 그룹 책임자 아래 PR(표준 제안)을 거쳐 REC(표준)이 될 예정입니다.

브라우저 지원율

CSS Grid 레이아웃 모듈은 표준 입후보(CR) 상태이지만, 브라우저 대부분이 완벽하게 지원하고 있습니다. 다만 IE 10 이상 부분 지원하고 있어 IE 10, 11을 프로젝트에서 고려해야 하는 상황일 경우, IE에서 CSS Grid를 활용하는 방법을 사용해야 크로스 브라우징 할 수 있습니다.

w3.org/TR/css-grid-1
w3c.github.io/w3process/#recs-and-notes
caniuse.com/#search=grid