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
  • 사용법
  • 레퍼런스
  1. CSS Grid 사용 가이드
  2. Grid 정렬

justify-items

Previousalign-contentNextalign-items

Last updated 6 years ago

사용법

행(row) 축을 따라 그리드 아이템 내부 콘텐츠를 정렬합니다. ( 속성의 반대) 이 설정은 그리드 컨테이너 내부 모든 그리드 아이템에 적용됩니다.

속성

값

비고

justify-items

start

center

end

stretch

기본 값

값

  • start: 그리드 영역의 시작점에 콘텐츠 정렬

  • center: 그리드 영역의 끝점에 콘텐츠 정렬

  • end: 그리드 영역의 중앙에 콘텐츠 정렬

  • stretch: 그리드 영역 전체 너비를 채움 (기본 값)

예시

.grid-container {
  justify-items: start;
}
.grid-container {
  justify-items: center;
}
.grid-container {
  justify-items: end;
}
.grid-container {
  justify-items: stretch;
}

개별 그리드 아이템에 행축 콘텐츠 정렬 속성을 적용하려면 justify-self 속성을 사용합니다.

레퍼런스

align-items
CSS Grid Layout Module Level 1
w3.org/TR/css-grid-1/#row-align
Logo