CSS 그리드에서 수평축 콘텐츠 정렬

그리드에서는 아이템을 배치하는 것뿐만 아니라 그리드의 수평축을 따라 콘텐츠를 정렬해야 할 수도 있습니다. 이 경우 부모 요소에 설정하는 속성 justify-content를 사용합니다. 예제를 통해 이 속성이 어떻게 작동하는지 살펴보겠습니다.

축의 시작점 기준

아이템들을 수평축의 시작점을 기준으로 정렬해 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: start;
  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;
}

Результат:

축의 중앙 기준

이번에는 아이템들을 수평축의 중앙을 기준으로 정렬해 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: center;
  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;
}

Результат:

축의 끝점 기준

아이템들을 수평축의 끝점을 기준으로 정렬해 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: end;
  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;
}

Результат:

실습 과제