CSS place-items 속성

정의와 사용법

place-items 속성은 그리드 레이아웃에 사용되며 다음 속성의 줄임말입니다:

• align-items
• justify-items

place-items 속성이 두 가지 값이 있을 때:

place-items: start center;

• align-items 속성의 값이 'start'입니다:
• justify-items 속성의 값이 'center'입니다:

place-items 속성이 하나의 값만 있을 때:

place-items: end;

• 그렇다면 align-items와 justify-items 속성의 값은 모두 'end'입니다

예제

예제 1

각 <div> 요소를 그리드 셀의 행 방향과 블록 방향 모두에서 시작 위치에 배치합니다:

#container {
  place-items: start;
}

직접 시도해보세요

예제 2: 쓰기 모드

그리드 컨테이너의 writing-mode 속성 값을 'vertical-rl'로 설정했을 때, 블록 방향의 끝 위치는 하단에서 왼쪽으로 이동하고, 행 방향의 끝 위치는 오른쪽에서 하단으로 이동합니다:

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

직접 시도해보세요

예제 3: 플렉서블 박스 레이아웃

justify-items 속성은 플렉서블 박스 레이아웃에 적용되지 않습니다. 따라서 플렉서블 박스 레이아웃에서 place-items 속성justify-items 의 값(즉 두 번째 값)은 무시됩니다.

#wrapper {
  place-items: stretch end;
}

직접 시도해보세요

CSS 문법

place-items: normal legacy|value|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

표格에 나타난 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

관련 페이지

강의:CSS 그리드 레이아웃

강의:CSS 플렉시블 레이아웃

참조:CSS align-items 속성

참조:CSS justify-items 속성

참조:CSS 워팅-모드 속성