CSS 그리드에서 개별 요소 정렬을 위한 단축 속성
개별 요소를 수평축과 수직축에서 동시에 정렬할 수 있습니다.
이를 위해 place-self 속성이 사용됩니다.
이 속성은 공백으로 구분된 두 개의 값을 받습니다.
첫 번째 값은 수직 정렬을 지정하고, 두 번째 값은 수평 정렬을 지정합니다.
예제를 통해 살펴보겠습니다.
수직 중앙, 수평 시작에 정렬
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: center start;
}
:
수직 시작, 수평 끝에 정렬
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: start end;
}
:
수직 끝, 수평 중앙에 정렬
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: end center;
}
:
실습 과제
세 개의 행에 다섯 개의 요소로 구성된 그리드를 생성하고, 첫 번째 요소를 수평축 시작점과 수직축 중앙에 정렬하세요.
이전 과제를 변경하여, 세 번째 요소가 수평축 끝점과 수직축 중앙에 정렬되도록 하세요.
이제 요소들을 두 개의 행에 배치하고, 다섯 번째 요소를 수평축 중앙과 수직축 끝점에 정렬하세요.
두 번째 요소가 수평축 시작점과 수직축 끝점에 정렬되고, 네 번째 요소가 수평축 중앙과 수직축 시작점에 정렬되도록 하세요.
