안녕하세요! 프론트엔드 개발자를 양성하는 강사입니다. CSS Grid 레이아웃은 처음엔 낯설 수 있지만, 제대로 익혀두면 정말 강력한 무기가 됩니다. 특히 프론트엔드 개발자로서 면접을 보거나 포트폴리오를 만들 때, 복잡한 레이아웃을 빠르고 정확하게 구현하는 능력을 보여주기에 Grid만한 게 없죠!
요청하신 대로 공식 문서의 내용을 하나도 빠짐없이, 이해하기 쉬운 구어체로 꼼꼼하게 번역해 드립니다. 중간중간 제 실무 경험과 팁도 팍팍 넣어두었으니 잘 따라와 주세요!
CSS 그리드 레이아웃에서 아이템 정렬하기 (Aligning items in CSS grid layout)
CSS 그리드 레이아웃(CSS grid layout)은 CSS 박스 정렬(CSS box alignment) 모듈을 구현합니다. 이는 플렉스박스(flexbox)가 플렉스 컨테이너 안에서 아이템들을 정렬할 때 사용하는 것과 완전히 동일한 표준이에요. 이 정렬 모듈은 모든 레이아웃 방식에서 정렬이 어떻게 작동해야 하는지 자세히 정의하고 있습니다.
이 가이드에서는 그리드 레이아웃에서 박스 정렬 속성들이 아이템을 정렬하는 데 어떻게 사용되는지 살펴볼 거예요.
아마 여러분은 이 속성과 값들이 플렉스박스에서 작동하는 방식과 아주 비슷하다는 걸 눈치채실 겁니다. 하지만 그리드는 2차원(two-dimensional)이고 플렉스박스는 1차원(one-dimensional)이기 때문에, 주의 깊게 살펴봐야 할 약간의 차이점들이 존재해요. 이런 이유로, 먼저 그리드에서 무언가를 정렬할 때 다루게 될 두 개의 축(axes)에 대해 알아보는 것으로 시작하겠습니다.
💡 강사의 팁:
기술 면접에서 "Flexbox와 Grid의 차이점이 무엇인가요?"라는 질문이 정말 자주 나옵니다. 이때 "Flexbox는 1차원(행 또는 열 하나) 레이아웃을 다루고, Grid는 2차원(행과 열 동시) 레이아웃을 다룹니다."라고 명확하게 답변하실 수 있어야 해요. 정렬 방식도 이 차이점에서 출발합니다!
그리드 레이아웃의 두 축 (The two axes of a grid layout)
그리드 레이아웃으로 작업할 때는 무언가를 정렬할 수 있는 두 개의 축, 즉 블록 축(block axis)과 인라인 축(inline axis)이 존재합니다. 블록 축(block axis)은 블록 레이아웃에서 블록들이 배치되는 방향의 축을 말해요. 만약 웹 페이지에 두 개의 단락(paragraph)이 있다면 하나가 다른 하나의 아래에 표시되죠. 바로 이 위에서 아래로 향하는 방향을 우리는 블록 축이라고 부릅니다.
인라인 축(inline axis)은 블록 축을 가로지르는 방향이며, 일반적인 인라인 흐름에서 텍스트가 쓰이는 방향을 뜻합니다. (즉, 왼쪽에서 오른쪽으로 향하는 가로 방향이죠.)
우리는 이 두 축을 기준으로 그리드 영역(grid areas) 안의 콘텐츠를 정렬할 수도 있고, 그리드 트랙(grid tracks) 그 자체를 정렬할 수도 있습니다.
블록 축에서 아이템 정렬하기 (Aligning items on the block axis)
align-self와 align-items 속성은 블록 축(수직 방향)의 정렬을 제어합니다. 이 속성들을 사용하면, 여러분이 배치한 그리드 영역 내에서 아이템 자체의 정렬 방식을 변경할 수 있습니다.
💡 강사의 팁:
이 부분, 실무 초보자분들이 정말 많이 헷갈려 하십니다! 외우기 쉽게 공식 하나 드릴게요. "align은 수직(세로) 정렬, justify는 수평(가로) 정렬!" 이것만 기억하셔도 공식 문서를 읽는 속도가 훨씬 빨라집니다.
align-items 사용하기 (Using align-items)
아래 예제에는 그리드 안에 4개의 그리드 영역(grid areas)이 있습니다. 우리는 그리드 컨테이너(grid container)에 align-items 속성을 사용해서 아이템들을 정렬할 수 있어요. 사용 가능한 값으로는 normal, stretch, 또는 <self-position>이나 <baseline-position> 값들이 있습니다.
normalstretchstartendcenterbaselinefirst baselinelast baselineauto(align-self에서만 사용 가능)
기본값은 normal이며, 그리드 컨테이너의 경우에는 이것이 stretch(쭉 늘리기)로 작동합니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
grid-auto-rows: 100px;
grid-template-areas:
"a a a a b b b b"
"a a a a b b b b"
"c c c c d d d d"
"c c c c d d d d";
align-items: start;
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>한 가지 명심할 점은, align-items: start를 설정하고 나면 각 자식 <div>의 높이는 그 <div> 안에 들어있는 콘텐츠의 양에 의해 결정된다는 거예요. 이는 align-items 속성을 아예 생략했을 때, 각 <div>의 높이가 자신의 그리드 영역을 가득 채우기 위해 쫙 늘어나는(stretch) 것과는 대비되는 부분입니다.
align-items 속성은 사실 모든 자식 그리드 아이템들의 align-self 속성을 한 번에 설정해 주는 역할을 합니다. 즉, 그리드 아이템 각각에 직접 align-self를 사용해서 개별적으로 정렬 속성을 설정할 수도 있다는 뜻이죠.
align-self 사용하기 (Using align-self)
바로 다음 예제에서는 서로 다른 정렬 값들을 보여주기 위해 align-self 속성을 직접 사용해 보겠습니다. 첫 번째 영역은 align-self의 기본 동작을 보여주고 있는데, 여기서는 stretch로 작동합니다. 두 번째 아이템은 align-self 값을 start로, 세 번째는 end로, 네 번째는 center로 설정했습니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
grid-auto-rows: 100px;
grid-template-areas:
"a a a a b b b b"
"a a a a b b b b"
"c c c c d d d d"
"c c c c d d d d";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
align-self: start;
}
.item3 {
grid-area: c;
align-self: end;
}
.item4 {
grid-area: d;
align-self: center;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>고유한 종횡비를 가진 아이템 (Items with an intrinsic aspect ratio)
align-self의 기본 동작은 그리드 컨테이너의 align-items 속성을 상속받는 것입니다. 앞서 말했듯 이 기본값인 normal은 아이템을 늘리는(stretch) 역할을 합니다. 하지만 이미지처럼 고유한 종횡비(aspect ratio)를 가진 아이템은 예외입니다. 이 경우에는 start처럼 동작하죠. 왜냐하면 종횡비를 가진 아이템을 강제로 쭉 늘려버리면 이미지가 찌그러지고 왜곡될 수 있기 때문이에요. 브라우저의 아주 똑똑한 배려랍니다!
인라인 축에서 아이템 정렬하기 (Justifying items on the inline axis)
align-items와 align-self가 블록 축(수직)에서 아이템을 정렬했다면, justify-items와 justify-self는 인라인 축(수평)에서 아이템을 정렬합니다. 사용할 수 있는 값들은 align-self 속성과 비슷하게 normal, stretch, <self-position>, <baseline-position> 값들이며, 여기에 left와 right가 추가됩니다. 사용 가능한 값은 다음과 같습니다:
normalstartendleftrightcenterstretchbaselinefirst baselinelast baselineauto(justify-self에서만 사용 가능)
아래에서 align-items 섹션에서 사용했던 것과 똑같은 예제를 보실 수 있어요. 다만 이번에는 justify-self 속성을 적용했습니다.
마찬가지로 고유한 종횡비를 가진 아이템을 제외하고 기본값은 stretch입니다. 즉, 여러분이 정렬 방식을 일부러 바꾸지 않는 이상, 그리드 아이템들은 자신의 그리드 영역을 가득 채우게 됩니다. 이 예제에서 첫 번째 아이템은 기본값인 stretch 정렬이 적용된 모습을 보여줍니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
grid-auto-rows: 100px;
grid-template-areas:
"a a a a b b b b"
"a a a a b b b b"
"c c c c d d d d"
"c c c c d d d d";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
justify-self: start;
}
.item3 {
grid-area: c;
justify-self: end;
}
.item4 {
grid-area: d;
justify-self: center;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>align-self와 align-items의 관계처럼, 그리드 컨테이너에 justify-items를 적용하면 컨테이너 안에 있는 모든 그리드 아이템들의 justify-self 값을 한 번에 설정할 수 있습니다.
참고 (Note):
justify-self와justify-items속성은 플렉스박스(flexbox)에서는 지원되지 않습니다! 플렉스박스는 1차원적인 특징을 가지고 있어서, 축을 따라 여러 개의 아이템이 존재할 수 있기 때문에 단일 아이템 하나만을 따로 수평 정렬(justify)하는 것이 불가능하기 때문이죠. 플렉스박스에서 메인 축(인라인 축)을 따라 아이템들을 정렬할 때는justify-content속성을 사용해야 합니다.💡 강사의 팁: 포트폴리오 프로필 웹사이트 만드실 때 이 부분에서 에러가 났다고 답답해하시는 분들이 많아요. "왜 Flexbox에서는
justify-self가 안 먹히지?" 하셨다면 바로 이런 이유 때문입니다!
단축 속성 (Shorthand properties)
place-items 속성은 align-items와 justify-items를 한 번에 쓸 수 있는 단축 속성입니다.
place-self 속성은 align-self와 justify-self를 한 번에 쓸 수 있는 단축 속성이에요. 실무에서 코드를 훨씬 간결하게 만들어주는 꿀 같은 속성이죠!
영역 중앙에 아이템 배치하기 (Center an item in the area)
align 속성과 justify 속성을 조합하면 그리드 영역 안에서 아주 쉽게 아이템을 정중앙에 배치할 수 있습니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
/* 💡 강사의 팁: 이 두 줄을 place-self: center; 한 줄로 요약할 수도 있습니다! */
}<div class="wrapper">
<div class="item1">Item 1</div>
</div>블록 축에서 그리드 트랙 정렬하기 (Aligning the grid tracks on the block axis)
여러분이 만든 그리드 트랙들이 그리드 컨테이너보다 더 작은 영역을 차지하는 상황이 발생할 수도 있어요. 이럴 때는 그리드 컨테이너 안에서 그리드 트랙 전체를 통째로 정렬할 수 있습니다.
align-content는 트랙들을 블록 축(수직)에서 정렬하고, justify-content는 인라인 축(수평)에서 정렬합니다. 앞서 보았던 *-items나 *-self 속성들처럼, place-content 속성은 align-content와 justify-content를 합친 단축 속성입니다.
align-content, justify-content, place-content에 사용할 수 있는 값에는 <content-distribution> (콘텐츠 분배) 값과 <content-position> (콘텐츠 위치) 값이 모두 포함됩니다. align-content 속성은 <baseline-position> 값도 허용하며, 다른 justify-* 속성들과 마찬가지로 justify-content 역시 left와 right를 허용합니다.
place-content에 사용할 수 있는 유효한 키워드는 다음과 같습니다:
normalstartendcenterstretchspace-aroundspace-betweenspace-evenlybaselinefirst baselinelast baselineleftright
align-content 속성은 그리드 전체(트랙 묶음)에 작용하기 때문에 반드시 그리드 컨테이너에 적용해야 합니다.
기본 정렬 (Default alignment)
이 예제에서는 가로 500px, 세로 500px 크기의 그리드 컨테이너 안에 각각 100px 너비의 행 3개와 열 3개를 만들고 10px의 간격(gap)을 주었습니다. 이렇게 되면 컨테이너 내부의 블록 방향과 인라인 방향 모두에 남는 여백 공간이 생기게 되겠죠.
그리드 레이아웃의 기본 동작은 start이기 때문에, 기본적으로 우리의 그리드 트랙들은 그리드 컨테이너의 왼쪽 위 구석(top left corner)에 위치하게 됩니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
<}.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
height: 500px;
width: 500px;
gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>align-content: end 설정하기 (Setting align-content: end)
위와 완전히 동일한 CSS와 HTML 구조에서, 이번에는 컨테이너에 align-content: end 값을 추가해 보겠습니다. 이렇게 하면 모든 트랙들이 통째로 묶여서 블록 차원(수직 방향)의 끝 라인(end line) 쪽으로 이동하게 됩니다.
.wrapper {
align-content: end;
}* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
height: 500px;
width: 500px;
gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>align-content: space-between 설정하기 (Setting align-content: space-between)
우리는 space-between, space-around, space-evenly, stretch와 같은 <content-distribution> (공간 분배) 값들도 사용할 수 있습니다. 이번 예제에서는 블록 축(수직)에서 트랙을 정렬하는 align-content 속성을 space-between으로 설정하여 트랙들 사이에 공간을 고르게 분배해 보겠습니다.
.wrapper {
align-content: space-between;
}* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
height: 500px;
width: 500px;
gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>만약 어떤 아이템이 여러 개의 그리드 트랙에 걸쳐(span) 있다면, 공간 분배 값(space-*)을 사용할 때 해당 아이템의 크기가 커질 가능성이 높습니다. 트랙과 트랙 사이에 추가된 여백 공간이 결과적으로 그 트랙들을 걸치고 있는 아이템 내부에 흡수되기 때문이죠.
따라서 이런 공간 분배 값들을 사용할 때는, 늘어난 추가 공간을 아이템의 콘텐츠가 잘 감당할 수 있는지 반드시 확인해야 합니다. 만약 아이템이 쫙 늘어나는(stretch) 것이 싫다면, 아이템 자체에 align-self 같은 정렬 속성을 사용해 시작(start)이나 끝(end)으로 밀어붙이는 방법으로 해결할 수 있습니다.
아래 이미지를 통해 align-content 값을 start로 했을 때와 space-between으로 했을 때의 차이를 비교해 볼 수 있습니다. 두 개의 행 트랙에 걸쳐 있는 첫 번째와 두 번째 아이템을 보세요. space-between 예제에서는 세 개의 행 '사이사이(between)'에 여백이 분배되면서, 결과적으로 그 여백을 흡수한 아이템들의 높이 자체가 더 커진 것을 명확히 확인할 수 있습니다.
인라인 축에서 그리드 트랙 정렬하기 (Justifying the grid tracks on the inline axis)
블록 축(수직)에서 align-content를 사용했던 것과 똑같은 방식의 정렬을 인라인 축(수평)에서도 수행할 수 있는데, 이때는 justify-content를 사용합니다.
같은 예제에서 이번에는 justify-content를 space-around로 설정해 볼게요. 이 역시 하나 이상의 열(column) 트랙에 걸쳐 있는 아이템의 크기를 늘어나게 만듭니다.
.wrapper {
align-content: space-between;
justify-content: space-around;
}* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
height: 500px;
width: 500px;
gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>정렬과 자동 마진 (Alignment and auto margins)
아이템을 해당 영역 내에서 정렬하는 또 다른 아주 유용한 방법은 바로 '자동 마진(auto margins)'을 사용하는 것입니다. 뷰포트나 부모 컨테이너 안에서 블록 레벨 요소를 정중앙에 배치해 본 적이 있으시다면, 아마 오른쪽과 왼쪽 마진(margin)을 auto로 설정하는 방식을 써보셨을 거예요.
자동 마진(auto)은 사용 가능한 잉여 공간을 쫙 빨아들이는 성질이 있습니다. 그래서 양쪽 마진을 모두 auto로 설정하면, 양쪽 마진이 서로 모든 공간을 차지하려고 팽팽하게 당기게 되고, 결과적으로 블록 요소가 정중앙으로 밀려나게 되는 원리입니다.
💡 강사의 팁:
이margin: auto기법은 프론트엔드 포트폴리오를 만들 때 정말 자주 쓰입니다! 예를 들어 웹사이트 상단 헤더에 로고는 왼쪽에 두고, 메뉴 버튼들을 오른쪽 끝으로 밀어버리고 싶을 때가 있죠? 이때 메뉴 버튼 그룹에margin-left: auto를 툭 하나 던져주면 끝납니다.
다음 예제에서 첫 번째 아이템(item 1)의 margin-left 속성을 auto로 설정했습니다. 이렇게 하면 콘텐츠에 필요한 공간을 할당하고 남은 모든 잉여 공간을 왼쪽 마진(auto margin)이 전부 다 집어삼키게 되므로, 자연스럽게 콘텐츠는 영역의 오른쪽 끝으로 찰싹 밀려나게 됩니다.
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
height: 500px;
width: 500px;
gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
}
.item1 {
grid-area: a;
margin-left: auto;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>브라우저 개발자 도구의 그리드 검사기(grid inspector)를 열어보면 아이템이 어떻게 배치되어 있는지 시각적으로 확인할 수 있습니다.
정렬과 쓰기 모드 (Alignment and writing modes)
지금까지 살펴본 모든 예제는 영어(또는 한국어)처럼 왼쪽에서 오른쪽으로 읽는(left-to-right) 언어 환경이 기준이었습니다. 즉, 물리적인 방향으로 생각했을 때 그리드의 시작 라인이 상단(top)과 좌측(left)에 위치하고 있었죠.
하지만 CSS 그리드 레이아웃과 CSS 박스 정렬은 CSS의 쓰기 모드(writing modes)와 밀접하게 연동되어 작동합니다. 아랍어처럼 오른쪽에서 왼쪽으로 읽는(right-to-left) 언어를 표시할 때는, 그리드의 시작점 자체가 우측 상단(top right)이 됩니다. 따라서 이런 환경에서 justify-content: start를 기본값으로 두면, 그리드 트랙은 그리드의 '오른쪽' 끝에서부터 시작하게 됩니다.
주의할 점은, margin-right나 margin-left를 사용한 자동 마진 설정, 혹은 top, right, bottom, left 속성을 사용한 절대 위치(absolute positioning) 지정과 같은 물리적 속성(physical properties)들은 이런 쓰기 모드의 흐름을 존중하지 않고 무조건 고정된 물리적 위치를 가리킨다는 것입니다.
CSS 그리드 레이아웃, 박스 정렬, 그리고 쓰기 모드 간의 상호작용에 대해서는 그리드, 논리적 값, 그리고 쓰기 모드(grids, logical values, and writing modes) 가이드에서 훨씬 더 깊게 다루게 될 텐데요. 여러 다국어를 지원하는 글로벌 사이트를 개발하거나 하나의 디자인 안에서 언어나 쓰기 모드를 혼합해야 할 때 반드시 이해해야 하는 아주 중요한 개념입니다.
더 보기 (See also)
- 그리드 레이아웃의 기본 개념 (Basic concepts of grid layout)
- 그리드 레이아웃과 다른 레이아웃 방식의 관계 (Relationship of grid layout with other layout methods)
- 라인 기반 배치를 사용한 그리드 레이아웃 (Grid layout using line-based placement)
- 그리드 템플릿 영역 (Grid template areas)
- 이름이 지정된 그리드 라인을 사용한 레이아웃 (Grid layout using named grid lines)
- 그리드 레이아웃의 자동 배치 (Auto-placement in grid layout)
- CSS 그리드 레이아웃에서의 박스 정렬 (Box alignment in CSS grid layout)
MDN 문서 개선에 참여하기 (Help improve MDN)
- 이 페이지가 도움이 되셨나요? (Was this page helpful to you?) [ Yes / No ]
- 기여하는 방법 알아보기 (Learn how to contribute)
- 이 페이지는 MDN 기여자들(MDN contributors)에 의해 2025년 11월 7일에 마지막으로 수정되었습니다.
- GitHub에서 이 페이지 보기 (View this page on GitHub)
- 이 콘텐츠의 문제점 신고하기 (Report a problem with this content)
지금까지 CSS Grid 레이아웃의 아이템 정렬에 대해 꼼꼼히 번역해 드렸습니다. 정렬 속성은 면접에서도 단골로 나오는 주제이고, 예쁘고 견고한 UI/UX를 개발하기 위해 프론트엔드 개발자가 가져야 할 필수 스킬 중 하나입니다. 직접 코드를 수정해 보시면서 눈으로 확인해 보시는 것을 적극 권장드려요. 추가로 궁금한 점이 있으시면 언제든지 질문해 주세요!
