안녕하세요! 프론트엔드 개발 강사입니다. 이번에 가져오신 문서는 현대 웹 레이아웃의 끝판왕인 CSS 그리드(Grid) 레이아웃과 다른 레이아웃 방식들과의 관계에 대한 내용이네요!
그리드(Grid)는 기존에 우리가 쓰던 Flexbox나 절대 위치 지정(position: absolute) 같은 방식들을 완전히 대체하려고 나온 것이 아닙니다. 오히려 그것들과 함께 어우러져 완벽한 레이아웃 시스템을 구축하기 위해 탄생했죠. "이럴 땐 Flex를 써야 해, Grid를 써야 해?" 현업에서 가장 많이 고민하시는 부분들을 이 문서에서 속 시원하게 풀어드릴게요. 구어체로 꼼꼼하게 번역해 보겠습니다! 😊
Grid 레이아웃과 다른 레이아웃 방식들과의 관계 (Relationship of grid layout to other layout methods)
CSS 그리드 레이아웃(CSS grid layout)은 다른 CSS 기능들과 함께 어우러져 완벽한 레이아웃 시스템을 구축하도록 설계되었습니다. 이 가이드에서는 그리드 레이아웃이 다른 CSS 기법들과 어떻게 조화를 이루며 작동하는지 설명해 드립니다.
이 문서의 내용
- Grid와 Flexbox의 차이점 (Grid and flexbox)
- Grid와 절대 위치 지정 요소 (Grid and absolutely positioned elements)
- Grid와 display: contents (Grid and display: contents)
- 같이 보기 (See also)
Grid와 Flexbox (Grid and flexbox)
CSS Grid 레이아웃과 CSS Flexbox 레이아웃(CSS flexbox layout)의 가장 기본적인 차이점은 바로 '차원(dimension)'에 있습니다. Flexbox는 1차원(one dimension) 레이아웃, 즉 가로(행) 또는 세로(열) 중 한 방향으로만 레이아웃을 짜도록 설계되었습니다. 반면 Grid는 2차원(two-dimensional) 레이아웃, 즉 가로(행)와 세로(열) 모두를 동시에 제어하도록 설계되었죠.
하지만 두 사양 모두 CSS 박스 정렬(CSS box alignment) 모듈의 기능(justify-content, align-items 등)을 똑같이 공유해서 사용합니다. 따라서 여러분이 이미 Flexbox 사용법을 익혔다면, 그 익숙함 덕분에 Grid를 배우는 것이 훨씬 쉬울 것입니다.
1차원 레이아웃 vs 2차원 레이아웃
간단한 예제를 통해 1차원 레이아웃(Flexbox)과 2차원 레이아웃(Grid)의 근본적인 차이점을 보여드리겠습니다.
첫 번째 예제에서는 Flexbox를 사용해서 상자들을 배치합니다. 컨테이너 안에 5개의 자식 아이템이 있고, 우리는 이 아이템들이 기본 너비(flex-basis) 150px을 기준으로 커지거나 줄어들 수 있도록 flex 속성을 주었습니다.
또한, 컨테이너에 flex-wrap: wrap 속성을 설정해서, 컨테이너 공간이 좁아져서 150px 크기를 유지할 수 없게 되면 아이템들이 자연스럽게 다음 줄(새로운 행)로 넘어가도록 만들었습니다.
(MDN Playground에서 실행해보기 (Play))
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
width: 500px;
display: flex;
flex-wrap: wrap; /* 공간이 부족하면 밑으로 떨어집니다 */
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
flex: 1 1 150px; /* 기본 150px에서 유연하게 커지고 줄어듭니다 */
}예제 화면을 보면 두 개의 아이템(Four, Five)이 다음 줄로 밀려난 것을 볼 수 있습니다. 그런데 흥미로운 점은, 이 밀려난 두 아이템이 윗줄에 있는 아이템들의 세로 선과 전혀 맞지 않고 자기들끼리 남은 공간을 반반씩 나눠 가지고 있다는 것입니다.
왜 이런 일이 발생할까요? 플렉스 아이템이 줄바꿈(wrap)될 때, 새롭게 생겨난 각각의 줄(row 또는 column)은 완전히 독립적인 새로운 플렉스 컨테이너인 것처럼 작동하기 때문입니다. Flexbox는 공간을 분배할 때 오직 '자기가 속한 그 한 줄(플렉스 라인)' 안에서만 계산을 합니다. 그래서 아랫줄 아이템들이 윗줄 아이템들의 크기나 위치를 전혀 신경 쓰지 않는 것이죠.
하지만, 사람들은 종종 이렇게 줄바꿈된 아이템들이 윗줄과 아랫줄의 격자(세로 선)에 딱딱 들어맞기를 원합니다. 이럴 때는 위아래(열)와 좌우(행)를 동시에 통제할 수 있는 2차원 레이아웃 방식이 필요합니다. 네, 바로 Grid가 나설 차례죠!
CSS Grid를 사용한 동일한 레이아웃
이번 예제에서는 Grid를 사용해서 방금 전과 비슷한 레이아웃을 만들어 보겠습니다. 이번에는 부모 컨테이너에 1fr짜리 열(column) 트랙을 3개 만들겠다고 선언했습니다. 아이템 자체에는 크기 관련 속성(flex: 1 1 150px 같은 것)을 줄 필요가 없습니다. 아이템들은 알아서 생성된 그리드 셀(칸) 안에 하나씩 쏙쏙 들어가 자리를 잡게 됩니다.
결과를 보면 아이템들이 엄격한 격자(strict grid)를 유지하며 행과 열을 칼같이 맞춰서 정렬된 것을 볼 수 있습니다. 아이템이 5개뿐이라 두 번째 줄의 마지막 칸(여섯 번째 자리)은 텅 빈 공백으로 남게 되죠.
(MDN Playground에서 실행해보기 (Play))
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 1fr 크기의 칸 3개를 만듭니다 */
}👨🏫 강사의 핵심 팁! "Flex를 쓸까 Grid를 쓸까?"
Flexbox를 쓸지 Grid를 쓸지 결정할 때 스스로에게 이 질문을 던져보세요:
- 레이아웃을 가로(행) 또는 세로(열) 중 한 방향으로만 통제해도 충분한가요? -> 그렇다면 Flexbox를 쓰세요!
- 레이아웃을 가로(행) 그리고 세로(열) 양방향에서 완벽하게 통제해야(줄을 맞춰야) 하나요? -> 그렇다면 Grid를 쓰세요!
콘텐츠가 먼저인가요, 레이아웃 뼈대가 먼저인가요? (Content out or layout in?)
1차원이냐 2차원이냐의 차이 외에도, Flexbox와 Grid 중 무엇을 선택할지 결정하는 또 다른 기준이 있습니다.
- Flexbox는 콘텐츠 중심(Content out)입니다. Flexbox의 이상적인 사용처는, 여러 개의 아이템이 있을 때 그 아이템들이 가진 '내용물의 크기'에 따라 각자가 알아서 공간을 나눠 가지도록 융통성 있게 놔두고 싶을 때입니다. 아이템들이 다음 줄로 넘어가더라도, 그 아이템들은 자신의 크기와 해당 줄의 남은 공간을 바탕으로 각자 유동적으로 간격을 계산합니다.
- Grid는 레이아웃 중심(Layout in)입니다. CSS Grid를 사용할 때는, 부모 요소에서 튼튼한 '뼈대(격자 레이아웃)'를 먼저 만들어 두고, 그 안에 아이템들을 끼워 넣거나 자동 배치 규칙을 통해 알아서 빈칸을 찾아 들어가게 만듭니다. (물론 Grid에서도 트랙 크기를 콘텐츠 크기에 맞춰 유동적으로 변하게 만들 수 있지만, 그렇게 하면 해당 트랙에 속한 줄 전체가 동시에 변하게 됩니다.)
만약 여러분이 Flexbox를 쓰면서 "아, 이 아이템 크기가 맘대로 변하지 않게 억지로 고정시켜야겠어"라며 Flexbox의 유연성을 죽이려고 애쓰고 있다면, 십중팔구 여러분은 CSS Grid를 써야 할 상황인 것입니다. 예를 들어 윗줄과 세로 선을 맞추기 위해 플렉스 아이템에 width: 33.33% 같은 고정 너비를 억지로 우겨넣고 있다면, Grid가 훨씬 훌륭한 선택입니다.
박스 정렬 (Box alignment)
사실 우리가 지금 아주 편리하게 쓰고 있는 강력한 그리드 정렬 기능(justify-content, align-items 등)들은 애초에 CSS Flexbox 레이아웃 사양에서 처음 정의되었습니다. CSS 역사상 처음으로 상자를 완벽하게 중앙 정렬(가운데 정렬)할 수 있게 만들어준 장본인이죠! 또한 여러 개의 단(columns)을 만들 때, 내용이 적은 단도 내용이 많은 단을 따라 키가 똑같이 늘어나게(stretch) 만드는 기능도 Flexbox가 처음 가져왔습니다.
이제 이 훌륭한 속성들은 CSS 박스 정렬(CSS box alignment)이라는 독립적인 모듈로 옮겨져서, Grid를 포함한 여러 레이아웃 모드에서 공통으로 사용되고 있습니다.
두 방식이 아이템을 정렬할 때 어떻게 다르게 동작하는지 비교해 볼까요?
첫 번째 예제는 Flexbox입니다. 컨테이너에 min-height를 200px로 주어 최소 높이를 설정했습니다. 그리고 플렉스 컨테이너에 align-items: flex-end를 주어서 아이템들이 컨테이너의 바닥에 붙도록 만들었죠.
그런 다음 첫 번째 아이템(box1)에는 부모의 설정을 무시하고 스스로 쫙 늘어나도록 align-self: stretch를 주었고, 두 번째 아이템(box2)에는 align-self: flex-start를 주어 다시 천장으로 올려버렸습니다.
(MDN Playground에서 실행해보기 (Play))
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>.wrapper {
display: flex;
align-items: flex-end; /* 전체를 바닥으로 내립니다 */
min-height: 200px;
}
.box1 {
align-self: stretch; /* 얘만 키를 200px로 쭉 늘립니다 */
}
.box2 {
align-self: flex-start; /* 얘만 천장으로 올립니다 */
}CSS Grid에서의 정렬
이번에는 Grid를 사용하여 똑같은 모양을 만들어 보겠습니다. 똑같은 박스 정렬 속성을 쓰지만, Grid 환경에 맞게 flex- 접두사를 떼고 start와 end를 사용했습니다. (물론 호환성을 위해 flex-start와 flex-end라고 써도 작동하긴 합니다.)
차이점은 무엇일까요? Grid 레이아웃에서 이 정렬 속성들은 아이템들을 자신이 속한 그리드 영역(grid area) 안에서 정렬시킨다는 것입니다. 이 예제에서는 그 영역이 작은 한 칸(cell) 뿐이지만, 여러 칸을 합친 커다란 영역 안에서 정렬하는 것도 물론 가능합니다.
(MDN Playground에서 실행해보기 (Play))
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: end; /* 그리드 셀 안에서 아이템들을 바닥으로 내립니다 */
grid-auto-rows: 200px; /* 각 행의 높이를 200px로 고정합니다 */
}
.box1 {
align-self: stretch; /* 그리드 셀 안에서 위아래로 꽉 차게 늘어납니다 */
}
.box2 {
align-self: start; /* 그리드 셀 안에서 천장으로 올립니다 */
}fr 단위와 flex-basis 비교
앞선 예제들에서 fr 단위가 그리드 컨테이너의 남는 공간을 비율대로 나누어 트랙 크기를 할당하는 모습을 보셨을 겁니다. 이 fr 단위를 minmax() 함수와 결합하면, 완벽한 2차원 그리드 형태를 유지하면서도 Flexbox의 flex-grow, flex-shrink와 매우 비슷한 유연한 레이아웃을 만들어 낼 수 있습니다.
Flexbox와 Grid 예제를 화면 크기를 줄였다 늘였다 해보면서 반응형(responsive)으로 어떻게 다르게 동작하는지 비교해 볼까요?
- Flexbox: 브라우저 창을 늘리고 줄이면, Flexbox는 화면의 가용 공간에 따라 한 줄에 들어가는 아이템의 개수를 기가 막히게 잘 조절합니다. 공간이 넓으면 5개가 한 줄에 다 들어가고, 좁아지면 1개씩만 남게 되죠.
- Grid: 위에서 우리가 만들었던 Grid 버전은 창 크기를 줄여도 무조건 3칸(column)을 유지합니다. 칸의 너비 자체는 줄어들고 늘어나겠지만, 우리가 처음에
repeat(3, 1fr)이라고 3칸을 명령했기 때문에 칸의 개수는 절대 변하지 않습니다.
그리드 트랙을 유연하게 꽉 채우기 (Auto-filling grid tracks)
그렇다면 Grid를 사용하면서도 Flexbox처럼 화면 크기에 따라 아이템 개수를 유연하게 바꿀 수는 없을까요? 다행히도 repeat() 함수 안에 특정 숫자 대신 auto-fill이나 auto-fit 키워드를 사용하면 가능합니다! 동시에 이 방식을 쓰면 아이템들이 윗줄 아랫줄 십자열(+)로 반듯하게 정렬되는 Grid의 장점은 그대로 유지할 수 있죠.
다음 예제에서는 repeat() 안에 숫자 대신 auto-fill 키워드를 쓰고, 트랙 크기에 200px을 지정했습니다. 이것은 브라우저에게 "이 컨테이너 너비 안에 200px짜리 칸이 들어갈 수 있는 한 최대한 많이 만들어 넣어라!"라고 명령하는 것입니다.
(MDN Playground에서 실행해보기 (Play))
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px); /* 200px 칸을 공간이 닿는 데까지 만듭니다 */
}개수가 유연하게 변하는 트랙 만들기
하지만 위의 코드는 Flexbox와 완벽하게 똑같진 않습니다. 왜냐하면 칸 너비가 딱 200px로 고정되어 있어서 화면 오른쪽에 애매한 여백이 남기 때문이죠. (Flexbox 예제에서는 아이템들이 남는 공간을 채우기 위해 200px보다 더 커졌었죠.) Grid에서 이 효과를 똑같이 내려면 auto-fit 키워드와 minmax() 함수를 결합해야 합니다.
다음 예제에서는 minmax(200px, 1fr)을 사용했습니다. 브라우저가 먼저 컨테이너 안에 200px짜리 칸(gap 간격 포함)을 꽉꽉 채워 넣을 수 있는 만큼 다 만들어 냅니다. 그러고 나서 화면 너비가 애매하게 남는다면? 최대값이 1fr이기 때문에, 브라우저에게 "그 남은 자투리 공간을 이 아이템들에게 골고루 나눠줘서 꽉 채워라!"라고 명령하는 셈이 됩니다.
💡 강사의 실무 팁! "반응형 디자인의 치트키"
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
이 코드는 미디어 쿼리(@media) 하나 없이 완벽한 반응형 카드 리스트를 만들어내는 '마법의 코드'입니다! 화면이 넓으면 카드가 4개, 5개씩 나오고 좁아지면 알아서 2개, 1개로 줄어들면서 빈틈없이 꽉꽉 차게 됩니다. 실무에서 무조건 쓰는 패턴이니 외워두세요!
(MDN Playground에서 실행해보기 (Play))
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 최소 200px을 유지하되 화면에 맞게 늘어납니다! */
}이 기술을 사용하면 Flexbox처럼 교차 축(cross-axis)의 윗줄과 아랫줄 아이템들을 나란히 맞출 필요 없이 완벽한 반응형을 구현할 수 있습니다.
만약 여러분이 Flexbox를 쓰면서, 줄바꿈 된 아랫줄 아이템들의 폭을 강제로 계산해서 억지로 윗줄에 맞추려고 낑낑대고 있거나, 빈 공간을 메꾸려고 빈 <div> 태그(empty flex items)를 마구잡이로 끼워 넣고 있다면... 이제는 그만두고 CSS Grid 레이아웃으로 넘어갈 때가 되었다는 확실한 증거입니다.
Grid와 절대 위치 지정 요소 (Grid and absolutely positioned elements)
Grid 레이아웃은 절대 위치 지정(position: absolute)된 요소들과도 훌륭하게 상호작용합니다. 그리드 전체나 특정 그리드 칸 안의 딱 원하는 위치에 요소를 띄워놓고 싶을 때 아주 유용하죠.
그리드 컨테이너 자체를 기준점(Containing block)으로 만들기
그리드 컨테이너를 유령(absolute) 요소들의 갇혀있을 기준점, 즉 컨테이닝 블록(containing block)으로 만들려면, 다른 위치 지정 방식들과 똑같이 그리드 컨테이너에 position: relative를 주면 됩니다.
이렇게 하고 나면, 이 안에 있는 그리드 아이템에 position: absolute를 주었을 때 그 아이템은 전체 그리드 컨테이너를 기준으로 둥둥 떠다니게 됩니다. 만약 이 절대 위치 아이템에 명시적인 그리드 위치(grid-column 등)까지 지정해 주었다면, 전체 그리드가 아니라 자신이 배치된 그 '특정 그리드 칸(area)' 안을 기준으로 떠다니게 되죠!
아래 예제에는 4개의 자식 아이템이 있습니다. 그중 box3 아이템은 position: absolute로 띄워져 있으며, 동시에 그리드 좌표(column 2~4, row 1~3)를 받아 특정 영역에 배치되었습니다. 부모인 그리드 컨테이너는 position: relative를 가지고 있으므로 이 아이템이 떠다니는 기준 감옥(positioning context)이 됩니다.
(MDN Playground에서 실행해보기 (Play))
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 20px;
position: relative; /* 여기서부터 절대 위치 계산의 기준점이 됩니다 */
}
.box3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3; /* 그리드 2~4열, 1~3행 사이의 네모난 구역을 할당받습니다 */
position: absolute;
top: 40px;
left: 40px; /* 할당받은 그 구역을 기준으로 위에서 40px, 왼쪽에서 40px 이동합니다 */
}이 아이템(box3)은 그리드의 2열부터 4열 전까지, 1행부터 3행 전까지의 거대한 네모 영역을 통째로 차지하도록 배치되었습니다. 그런 다음 그 영역 안에서 top과 left 속성을 통해 살짝 이동했죠. 하지만 중요한 점은, 이 요소는 position: absolute를 받았기 때문에 일반 흐름에서 완전히 빠져나왔다(taken out of flow)는 사실입니다. 그 결과, Grid의 자동 배치(auto-placement) 규칙이 작동하면서 마치 box3가 없는 것처럼 빈자리에 4번째 아이템(Four)을 쏙 집어넣게 됩니다.
그리드 컨테이너가 기준점(relative)이 아니라면?
만약 절대 위치를 지정받은 요소의 부모가 그리드 컨테이너이긴 한데, 이 부모에게 position: relative를 주지 않았다면 어떻게 될까요? 이때도 일반적인 요소들과 똑같이 흐름에서 완전히 빠져나오게 됩니다. 다만 기준점(positioning context)을 잃어버렸기 때문에, 조상 요소들 중 relative나 absolute가 있는 요소를 찾을 때까지 위로 쭉쭉 올라가게 되고, 끝내 찾지 못하면 결국 브라우저 화면(viewport) 전체를 기준으로 떠다니게 됩니다.
이렇게 되면 이 아이템은 크기 계산이나 자동 배치 등 그리드 레이아웃 시스템에서 완전히 투명 인간 취급을 받게 됩니다.
그리드 셀 자체를 기준점(relative)으로 만들기
이번에는 그리드 컨테이너 전체가 아니라, 특정 그리드 아이템(셀) 안에 절대 위치 요소를 가둬두고 싶을 때입니다. 이럴 때는 그 셀 자체에 position: relative를 주고 자식 요소에 absolute를 주면 됩니다. 즉, 그리드 셀(box3) 하나가 기준점이 되는 것이죠.
(MDN Playground에서 실행해보기 (Play))
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">
Three
<div class="abspos">
이 블록은 absolute 입니다. 이번에는 그리드 셀(box3) 자체가 기준점이 되어서,
이 셀의 바깥쪽 테두리부터 offset 값을 계산합니다.
</div>
</div>
<div class="box4">Four</div>
</div>.box3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
position: relative; /* 이제 이 칸(cell)이 절대 위치의 기준점이 됩니다! */
}
.abspos {
position: absolute;
top: 40px;
left: 40px;
/* (디자인을 위한 배경색 등 생략) */
}Grid와 display: contents (Grid and display: contents)
마지막으로 주목해야 할 것은 Grid 레이아웃과 display: contents 사이의 상호작용입니다. CSS 디스플레이(CSS display) 모듈에 정의된 바에 따르면, 요소의 display 속성을 contents로 설정할 경우, 그 요소(껍데기) 자체는 화면에 어떤 박스도 만들어내지 않고 사라집니다. 하지만 그 안에 들어있는 자식 요소들과 가상 요소(::before 등)들은 평소처럼 렌더링 됩니다. 즉, 껍데기는 쏙 빠지고 알맹이(자식들)만 부모 위치로 쑥 올라가서 레이아웃에 직접 참여하게 되는 것입니다!
이것이 조금 이상하게 들리시나요? 예제를 보시면 확 와닿으실 겁니다.
손자 요소를 둔 Grid 레이아웃
이 예제에서는, 그리드의 첫 번째 아이템(box1)이 3개의 열(column)을 모두 차지하도록 크게 합쳐놓았습니다. 그리고 그 box1 안에는 또 3개의 자잘한 자식들(nested)이 들어있죠. 이 3개의 알맹이(a, b, c)들은 Grid 컨테이너의 '직계 자식'이 아니라 '손자'이기 때문에, 그리드 레이아웃 시스템에 들어가지 못하고 평범한 블록(block) 요소처럼 무미건조하게 위아래로 쌓여 있습니다.
(MDN Playground에서 실행해보기 (Play))
<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
</div>.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4; /* 가로 3칸을 꽉 채웁니다 */
}display: contents 사용하기
자, 이제 기적을 보여드릴게요. 저 3개의 손자 요소들을 품고 있는 껍데기 박스인 box1에 display: contents를 딱 한 줄 추가해 봅시다.
그러면 box1이라는 껍데기 박스는 마법처럼 뿅 하고 사라지고, 그 안에 갇혀있던 세 명의 손자 아이템(a, b, c)들이 할아버지(그리드 컨테이너)의 품으로 쑥 올라와서 당당한 진짜 그리드 아이템들로 변신하게 됩니다! 이제 이 알맹이들도 자동 배치 규칙에 따라 그리드 칸 안에 쏙쏙 자리를 잡게 되죠.
(MDN Playground에서 실행해보기 (Play))
.box1 {
grid-column-start: 1;
grid-column-end: 4;
display: contents; /* 껍데기를 날려버리고 알맹이들을 위로 승격시킵니다! */
}이 기술은 HTML 태그 구조상 의미론적(semantic)으로는 <div>나 <ul>로 묶어두어야 하지만, 디자인(레이아웃) 적으로는 이 묶음 껍데기가 방해될 때, 이 알맹이들을 상위 그리드 시스템에 편입시키는 엄청난 치트키입니다. (이 기능은 Flexbox에서도 똑같이 작동합니다!)
👨🏫 강사의 실무 팁! "디자인과 마크업의 분리"
display: contents는 시맨틱 웹과 완벽한 레이아웃을 동시에 잡게 해주는 엄청난 속성입니다. 리스트를 만들 때 꼭<ol>로 감싸야 하는데 Grid를 적용하려니 번거롭다면?<ol>에display: contents를 주고 최상위 컨테이너에 Grid를 줘보세요. 감탄이 절로 나오실 겁니다!
이 가이드를 통해 확인하셨듯, CSS Grid 레이아웃은 웹 개발자가 쓸 수 있는 수많은 무기 중 하나일 뿐입니다. 여러분이 구현하고자 하는 디자인에 따라 Flexbox, Grid, 그리고 Position 기능들을 두려워하지 말고 팍팍 섞어 쓰며 최고의 결과물을 만들어 내시길 바랍니다!
같이 보기 (See also)
MDN 개선에 참여하기 (Help improve MDN)
이 페이지가 도움이 되셨나요? [네 (Yes)] / [아니요 (No)]
기여하는 방법 알아보기 (Learn how to contribute)
이 페이지는 2025년 12월 16일에 MDN 기여자들 (MDN contributors)에 의해 마지막으로 수정되었습니다.
