Grid 레이아웃에서의 박스 정렬
CSS 박스 정렬(Box alignment) 모듈은 다양한 레이아웃 방식에서 정렬이 어떻게 작동하는지를 자세히 설명하고 있어요. 이 페이지에서는 CSS 그리드 레이아웃의 맥락에서 박스 정렬이 어떻게 작동하는지 살펴볼 거예요.
이 가이드는 CSS 그리드 레이아웃에 특화된 내용을 다루는 것을 목표로 하기 때문에, 레이아웃 방식 전반에 걸친 박스 정렬의 공통 기능을 설명하는 박스 정렬 개요 가이드와 함께 읽어보시는 걸 추천드려요.
💡 강사 팁: 그리드 레이아웃에서 정렬을 처음 배울 때 많은 분들이 헷갈려 하시는데요, justify와 align의 차이를 확실히 이해하는 게 정말 중요해요. 간단히 말하면 justify는 가로(인라인) 방향, align은 세로(블록) 방향이라고 기억하시면 편해요. 그리고 실무에서는 이 정렬 속성들을 조합해서 사용하는 경우가 정말 많으니까, 각각의 역할을 확실히 익혀두시면 좋아요!
이 문서의 내용
기본 예제
그리드 레이아웃을 사용하는 이 예제에서는 인라인 메인 축에 고정 너비 트랙을 배치한 후 그리드 컨테이너에 추가 공간이 생겨요. 이 공간은 justify-content를 사용해서 분배되죠. 블록 교차 축에서는 그리드 영역 내부의 아이템 정렬이 align-items로 제어돼요. 첫 번째 아이템은 align-self를 center로 설정해서 그룹에 설정된 align-items 값을 재정의하고 있어요.
💡 강사 팁: 이 예제가 정렬의 핵심 개념을 잘 보여주고 있어요. 실무에서는 전체 아이템에 공통 정렬을 적용하고, 특정 아이템만 다르게 정렬해야 하는 경우가 정말 많거든요. 이럴 때 -items로 전체를 제어하고, -self로 개별 아이템을 조정하는 패턴을 자주 사용해요.
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three <br />has <br />extra <br />text</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>.box {
display: grid;
grid-template-columns: 120px 120px 120px;
align-items: start;
justify-content: space-between;
border: 2px dotted rgb(96 139 168);
}
.box :first-child {
align-self: center;
}그리드 축
2차원 레이아웃 방식인 그리드 레이아웃으로 작업할 때는 항상 아이템을 정렬할 수 있는 두 개의 축이 있어요. 우리는 이것을 달성하기 위해 모든 박스 정렬 속성을 사용할 수 있어요.
인라인 축은 사용 중인 쓰기 모드(writing mode)에서 문장의 단어가 진행되는 방향에 해당하는 축이에요. 따라서 영어나 아랍어 같은 수평 언어에서는 인라인 방향이 수평으로 진행돼요. 수직 쓰기 모드를 사용하는 경우라면 인라인 축이 수직으로 진행될 거예요.
인라인 축에서 정렬하려면 justify-로 시작하는 속성들을 사용해요: justify-content, justify-items, 그리고 justify-self가 있죠.
블록 축은 인라인 축을 가로지르는 방향으로, 블록들이 페이지 아래로 표시되는 방향이에요. 예를 들어 영어에서 문단들은 수직으로 서로 아래에 표시되죠. 이것이 블록 차원이에요.
블록 축에서 정렬하려면 align-으로 시작하는 속성들을 사용해요: align-content, align-items, 그리고 align-self가 있어요.
💡 강사 팁: justify와 align을 구분하는 게 처음엔 어려울 수 있어요. 저는 학생들에게 "justify는 '정당화하다'라는 뜻인데, 워드프로세서에서 텍스트를 좌우 정렬할 때 'justify'를 쓴다"고 설명해요. 그래서 justify는 가로 방향이라고 연상하면 외우기 쉬워요. 그리고 한국어나 영어처럼 수평 언어를 기준으로 생각하면 justify=가로, align=세로로 기억하시면 돼요!
셀프 정렬
이 속성들은 아이템이 배치된 그리드 영역 내부에서 아이템을 정렬하는 것을 다뤄요:
*-items 속성들, 즉 align-items와 justify-items는 그리드 컨테이너에 적용되며 모든 그리드 아이템을 그룹으로 정렬해요. *-self 속성들, 즉 align-self와 justify-self는 대신 그리드 아이템에 설정돼요. 이것은 모든 그리드 아이템에 정렬을 설정한 다음, 개별 그리드 아이템의 규칙에 align-self나 justify-self 속성을 적용해서 다른 정렬이 필요한 아이템들을 재정의할 수 있다는 의미예요.
align-items와 justify-items의 초기값은 stretch이고, align-self와 justify-self의 초기값은 auto예요. 그래서 아이템이 전체 그리드 영역에 걸쳐 늘어나게 돼요. 이 규칙의 예외는 아이템이 고유한 종횡비(aspect ratio)를 가지고 있는 경우인데, 예를 들어 이미지 같은 경우죠. 이 경우 아이템은 이미지가 왜곡되지 않도록 양쪽 차원 모두에서 start로 정렬돼요.
💡 강사 팁: 실무에서 이미지나 비디오 같은 미디어를 그리드에 배치할 때 이 기본 동작을 이해하는 게 정말 중요해요. 이미지가 자동으로 stretch되면 왜곡될 수 있기 때문에 브라우저가 똑똑하게도 이미지는 기본적으로 start로 정렬시켜요. 만약 이미지를 영역에 꽉 채우고 싶다면 object-fit 속성을 함께 사용해야 해요!
콘텐츠 정렬
이 속성들은 분배할 추가 공간이 있을 때 그리드의 트랙을 정렬하는 것을 다뤄요:
이런 시나리오는 정의한 트랙들의 총합이 그리드 컨테이너의 전체 너비보다 작을 때 발생해요.
💡 강사 팁: 콘텐츠 정렬과 아이템 정렬의 차이를 이해하는 게 중요해요. 간단히 말하면:
- 콘텐츠 정렬(content): 그리드 트랙 자체를 컨테이너 내에서 어떻게 배치할지 결정
- 아이템 정렬(items): 각 그리드 셀 안에서 아이템을 어떻게 배치할지 결정
실무에서는 반응형 디자인을 만들 때 justify-content를 space-between이나 space-around로 설정해서 여백을 균등하게 분배하는 경우가 많아요!
Gap과 레거시 grid-gap 속성
이 속성들은 그리드 컨테이너 내에서 그리드 아이템들 사이의 간격을 정의해요:
그리드 명세는 원래 grid-row-gap, grid-column-gap, 그리고 grid-gap 속성의 정의를 포함하고 있었어요. 이것들은 이후에 박스 정렬 명세로 옮겨졌고 row-gap, column-gap, 그리고 gap으로 별칭이 지정되었어요. 이렇게 해서 아이템 사이의 간격이 의미가 있는 다른 레이아웃 방식에서도 사용될 수 있게 되었죠.
💡 강사 팁: gap 속성은 정말 유용해요! 예전에는 margin으로 간격을 만들었는데, 마지막 아이템의 margin을 제거하기 위해 :last-child 같은 선택자를 써야 했어요. 하지만 gap을 사용하면 이런 번거로움 없이 아이템 사이의 간격만 딱 만들어줘요.
그리고 요즘은 grid-gap보다는 gap을 사용하는 걸 추천드려요. gap은 플렉스박스에서도 사용할 수 있어서 더 범용적이거든요. grid-gap은 하위 호환성을 위해 남아있지만, 새로운 프로젝트에서는 gap을 사용하세요!
관련 문서
- CSS 박스 정렬 모듈
- 박스 정렬 개요
- 플렉스박스에서의 박스 정렬
- 다단 레이아웃에서의 박스 정렬
- 블록, 절대 위치 및 테이블 레이아웃을 위한 박스 정렬
- CSS 그리드 레이아웃에서 아이템 정렬하기
도움이 되셨나요?
이 페이지는 2025년 11월 20일에 MDN 기여자들에 의해 마지막으로 수정되었어요.
