CSS 그리드 셀 내부 양축 정렬
그리드 셀 내부 요소들을
수평 축과 수직 축을 동시에
정렬할 수 있습니다.
이를 위해 부모 요소에 설정하는 두 가지
속성 justify-items
과 align-items를
조합할 수 있습니다.
축의 중심에 맞추기
요소들을 수평 및 수직 축의 중심에 맞춰 정렬해 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: 100px 100px;
grid-template-rows: 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>
#parent {
display: grid;
justify-items: start;
align-items: end;
grid-template-columns: 100px 100px;
grid-template-rows: 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>
#parent {
display: grid;
justify-items: end;
align-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: 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;
}
:
이제 디버거에서 우리의 그리드를 확인해 봅시다:
실습 문제
세 개의 행에 위치한 다섯 개의 요소로 구성된 그리드를 만드세요. 셀 내부 요소들을 수평 축 시작점과 수직 축 중심에 맞춰 정렬하세요.
이제 두 개의 행에 그리드 요소들을 배치하고, 셀 내부 요소 정렬을 수평 축 중심과 수직 축 시작점에 맞게 설정하세요.
이전 문제를 수정하여, 요소 정렬이 수평 축 끝점과 수직 축 중심에 맞게 이루어지도록 하세요.