CSS Grid Layout Guidebook
CtrlK
  • 레이아웃 디자인
  • 웹 레이아웃 기술 발전사
  • 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
  1. CSS Grid 사용 가이드

CSS Grid 속성 요약

CSS Grid 모듈 속성을 컨테이너, 아이템 별로 정리 해봅니다.

그리드 컨테이너

그리드 아이템

display

grid-row-start

grid-template-rows

grid-row-end

grid-template-columns

grid-column-start

grid-template-areas

grid-column-end

grid-template

grid-row

row-gap

grid-column

column-gap

grid-area

gap

justify-self

justify-items

align-self

align-items

justify-content

align-content

grid-auto-rows

grid-auto-columns

grid-auto-flow

grid

PreviousCSS Grid 사용 가이드NextGrid 컨테이너

Last updated 7 years ago