목차
place-items 예제 - (인라인/블락)방향 아이템 일괄 지정 place-items 정의 place-items 구문 place-items 예제 - writing-mode 속성으로 블락방향 변경 경우 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 셀 내 아이템의 (횡축/종축) 정렬 지정하는 속성으로, 아래 속성을 일괄 지정 가능한 단축속성.
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>
결과보기
