[css] CSS - place-items 속성 - 그리드 레이아웃에서 셀 내 아이템 (수직/수평) 정렬 (= place-items속성 = 플레이스아이템스속성)

1. place-items 예제 - (인라인/블락)방향 아이템 일괄 지정
2. place-items 정의
3. place-items 구문
4. place-items 예제 - writing-mode 속성으로 블락방향 변경 경우
5. place-items 예제 - (인라인/블락)방향 아이템 각각 지정

place-items 예제 - (인라인/블락)방향 아이템 일괄 지정

 

<style>

#box {

  width: 60%;

  aspect-ratio: 3/2;

  border: 1px solid gray;

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: 1fr 1fr;

  place-items: start;

}

#box > div {

  width: 60%;

  aspect-ratio: 2;

  background-color: pink;

}

</style>

<div id="box">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

</div>

 

결과보기

place-items 정의

 

grid 셀 내 아이템의 (횡축/종축) 정렬 지정하는 속성으로, 아래 속성을 일괄 지정 가능한 단축속성.

• align-items 속성 - (grid/flex) 레이아웃 둘 다 가능.
• justify-items 속성 - (grid) 레이아웃에서만 가능. flex에선 작동 X

 

---

 

1.

(grid/flex) 모두에서 사용 가능하나, justify-items 속성값 부분은 flex에서 무시됨.

 

2. 속성값 개수별 의미

• 속성값이 2개인 경우 (예: start center) - align-items justify-items 속성순으로 나열.
• 속성값이 1개인 경우 (예: end) - 둘 다 end로 지정.

 

3.

• 기본값: normal legacy
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.placeItems="stretch center";

 

4.

IE 제외한 주요 최신 브라우저 모두 지원.

 

5. MDN place-items 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

 

place-items 구문

 

selector {place-items: normal legacy|value|initial|inherit;}

 

---

[속성값]

 

normal legacy

align-items 속성 (기본값: normal)과 justify-items 속성 (기본값: legacy)순으로 나열. 

 

value

공통 사용 가능한 키워드. (가능값 종류)

• center -셀 중앙에 배치.
• end - 셀 끝 부분에 배치.
• start - 셀 시작 부분에 배치.
• stretch - 아이템 크기 미설정 된 경우, 아이템 크기 늘려 셀을 채움.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

place-items 예제 - writing-mode 속성으로 블락방향 변경 경우

 

<style>

#container {

  width: 60%;

  aspect-ratio: 1;

  border: 1px solid gray;

  display: grid;

  grid-template-columns: 1fr 1fr;

  place-items: end;

  writing-mode: vertical-rl;

}

#container > div {

  width: 40%;

  aspect-ratio: 1;

  margin: 2px;

  background-color: pink;

}

</style>

<div id="container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

</div>

 

결과보기

place-items 예제 - (인라인/블락)방향 아이템 각각 지정

[예제1] - grid 경우

 

<style>

#container {

  width: 60%;

  aspect-ratio: 3/2;

  border: 1px solid gray;

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: 1fr 1fr;

  place-items: stretch end;

}

#container > div {

  width: 60%;

  aspect-ratio: 2;

  background-color: pink;

}

</style>

<div id="container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

</div>

 

결과보기

---

[예제2] - flex 경우

justify-items 속성은 flex와 무관해 무시됨. (∴ 2번째 속성값 end는 적용 X)

 

<style>

#container {

  width: 60%;

  height: 200px;

  border: 1px solid gray;

  display: flex;

  flex-wrap: wrap;

  place-items: stretch end;

}

#container > div {

  padding: 30px;

  margin: 2px;

  background-color: pink;

}

</style>

<div id="container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

</div>

결과보기