CSS 그리드 셀 내부의 수직 축 정렬
그리드 셀 내부 요소의 수직 축 정렬을 위해
부모 요소에 설정하는 align-items 속성을
사용합니다. 이 속성의 동작은 브라우저 개발자 도구에서
그리드를 확인할 때 볼 수 있습니다.
축의 시작점 기준
셀 내부 요소들을 수직 축의 시작점에 맞춰 정렬해 보겠습니다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: flex-start;
grid-template-columns: 100px 100px;
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;
}
:
브라우저 개발자 도구에서 우리 그리드를 살펴보겠습니다:
축의 중앙 기준
이제 셀 내부 요소들을 수직 축의 중앙에 맞춰 정렬해 보겠습니다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: center;
grid-template-columns: 100px 100px;
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;
}
:
브라우저 개발자 도구에서 우리 그리드를 살펴보겠습니다:
축의 끝점 기준
이번에는 요소 정렬을 다시 변경하여, 수직 축의 끝점에 맞춰 보겠습니다:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: end;
grid-template-columns: 100px 100px;
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 {
}
:
브라우저 개발자 도구에서 우리 그리드를 살펴보겠습니다:
실습 과제
두 개의 열로 구성된 6개의 요소를 가진 그리드를 생성하세요. 셀 내부 요소들을 수직 축의 시작점에 맞춰 정렬하세요.
이제 그리드 요소들을 세 개의 열에 배치하고 셀 내부 요소들의 정렬을 그리드 수직 축의 중앙에 맞도록 설정하세요.
이전 과제를 수정하여 요소들의 정렬이 수직 축의 끝점을 기준으로 이루어지도록 하세요.
