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
  • Grid
  • Grid Line
  • Grid Track
  • Grid Cell
  • Grid Area
  • Grid Gutters
  • 요약

한 눈에 살펴보는 Grid 용어

PreviousCSS Grid 레이아웃 모듈Next거꾸로 살펴보는 그리드

Last updated 6 years ago

Grid

그리드 컨테이너(Container)는 행(Rows)과 열(Columns)을 가지며, 그리드 아이템(Items)을 배치할 수 있습니다.

Grid Line

그리드의 행/열을 그리는 선을 말하며, 각 선은 라인 넘버를 갖습니다. 그리드 아이템을 배치하는 기준으로 사용됩니다.

Grid Track

그리드 트랙은 그리드 라인 사이의 행 또는 열 공간을 말합니다.

Grid Cell

그리드 셀은 4개의 그리드 라인이 묶여 그려지는 가장 작은 단위(유닛) 입니다.

Grid Area

그리드 에어리어는 그리드 유닛이 묶인 영역으로 고유한 식별자를 가지며, 식별자를 통해 요소를 배치할 수 있습니다.

Grid Gutters

그리드 거터는 행 또는 열 사이 간격(Gap)을 말합니다.

요약

용어

설명

비고

Grid

그리드 컨테이너 요소

자식요소를 그리드 아이템으로 설정

Grid Line

그리드를 구성하는 수직/수평 선

라인 넘버를 토대로 아이템 배치

Grid Track

그리드 라인 사이의 행 또는 열

Grid Cell

4개의 그리드 라인(사각형)으로 작은 단위

'유닛'이라고도 불림

Grid Area

그리드 셀이 묶인 영역

고유한 식별자를 토대로 아이템 배치

Grid Gutters

컬럼/로우 사이 간격