CSS / Tutorial / Grid / display

display: grid는 요소 내부를 Grid 배치로 만들고, display: inline-grid는 내부를 같은 Grid 방식으로 배치하면서 그 컨테이너가 바깥 문장 흐름에서는 인라인 수준으로 놓이게 합니다. grid만 선언해도 Grid는 이미 적용되며, 열을 따로 정하지 않으면 기본 자동 배치가 한 열로 보여 일반 블록과 비슷할 수 있습니다.

컨테이너 바깥 배치와 내부 배치 구분

display는 요소 자체가 주변과 어떻게 배치되는지와, 그 안의 자식을 어떤 방식으로 배치하는지를 함께 결정합니다. grid는 일반적인 문서 흐름에서 블록 수준의 Grid 컨테이너, inline-grid는 인라인 수준의 Grid 컨테이너를 만듭니다. 둘 다 바로 아래 자식은 Grid 아이템으로 배치합니다.

같은 의미를 두 키워드로 표현하면 각각 display: block grid, display: inline grid입니다. 기존 한 키워드 표기인 grid와 inline-grid도 사용할 수 있습니다. 실제 차이를 보려면 내부 아이템 모양뿐 아니라 컨테이너의 전체 너비와 앞뒤 텍스트의 위치를 함께 확인하세요. 속성의 두 역할은 MDN display 문서에 설명되어 있습니다.

전체 예제: 일반 블록·한 열·두 열·인라인 격자

아래 코드를 grid-display.html로 저장하고 브라우저에서 엽니다. 외부 파일과 JavaScript는 필요하지 않습니다. 모든 격자 안에는 같은 가·나·다·라 네 요소를 넣었습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid와 inline-grid 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; } h2 { margin: 16px 0 4px; font-size: 18px; }
    .sample, .line { max-width: 420px; padding: 10px; border: 1px solid #7795a3;
      background: #edf5f7; }
    .item { min-width: 0; min-height: 40px; padding: 8px;
      border: 1px solid white; background: #176f80; color: white; text-align: center; }
    .single { display: grid; gap: 8px; }
    .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .inline { display: inline-grid; grid-template-columns: repeat(2, 60px);
      gap: 8px; padding: 8px; background: #ffe3a0; vertical-align: middle; }
  </style>
</head>
<body>
<h1>Grid의 display 비교</h1>
<h2>일반 블록</h2>
<div class="sample plain"><div class="item">가</div><div class="item">나</div><div class="item">다</div><div class="item">라</div></div>
<h2>grid: 기본 한 열</h2>
<div class="sample single"><div class="item">가</div><div class="item">나</div><div class="item">다</div><div class="item">라</div></div>
<h2>grid: 두 열 정의</h2>
<div class="sample two"><div class="item">가</div><div class="item">나</div><div class="item">다</div><div class="item">라</div></div>
<h2>inline-grid: 문장 안의 격자</h2>
<div class="line">앞 <div class="inline"><div class="item">가</div><div class="item">나</div><div class="item">다</div><div class="item">라</div></div> 뒤</div>
</body>
</html>

일반 블록은 네 자식 블록이 세로로 이어집니다. display: grid만 적용한 둘째 예제도 열 개수를 정하지 않아 한 열이며, 여기서는 gap: 8px를 추가해 간격을 볼 수 있습니다. 셋째는 grid-template-columns로 두 열을 정의했으므로 두 개씩 두 행에 놓입니다.

마지막 예제의 금색 컨테이너는 inline-grid입니다. 내부는 두 열이고 앞·뒤 텍스트와 같은 줄에 놓일 수 있습니다. vertical-align: middle은 그 인라인 컨테이너와 주변 줄의 수직 위치를 조절하는 설정이며, Grid 아이템을 셀 가운데 정렬하는 속성은 아닙니다. 전체 줄에 들어갈 공간이 부족하면 컨테이너나 뒤 텍스트가 다음 줄로 이동할 수 있습니다.

grid를 선언했는데 한 열인 이유

display: grid는 배치 방식을 활성화하는 선언이고, 자동으로 원하는 열 수를 추측해 주는 선언은 아닙니다. 기본 행 방향 자동 배치에서 명시적 열 정의가 없으면 아이템이 하나의 암시적 열에 차례대로 놓일 수 있습니다. 아래처럼 열 정의를 추가하면 같은 HTML로 두 열을 만들 수 있습니다.

.container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

열을 두 개 만들 때 행 수까지 반드시 정할 필요는 없습니다. 아이템 네 개라면 보통 두 행이 생기고, 다섯째 아이템이 추가되면 새 행이 생깁니다. 다만 grid-auto-flow나 아이템의 명시적 배치를 바꾸면 자동 배치 결과도 달라집니다. 열·행 크기를 정하는 것과 컨테이너를 활성화하는 것을 나누어 생각하면 문제를 찾기 쉽습니다.

Grid 아이템이 되는 것은 기본적으로 컨테이너의 직접 자식입니다. 아이템 안의 제목과 문단까지 바깥 격자의 별도 셀로 분리되지는 않습니다. 안쪽 요소도 격자로 나누고 싶다면 그 요소를 다시 Grid 컨테이너로 만들거나 요구 사항에 맞는 중첩 배치를 설계해야 합니다. Grid 기본 개념 문서에서 컨테이너와 아이템의 관계를 확인할 수 있습니다.

너비와 적용되지 않는 경우의 점검

일반 문서 흐름에서 너비 auto인 블록 수준 Grid는 보통 사용할 수 있는 가로 공간을 채웁니다. inline-grid는 바깥 인라인 배치와 내부 트랙의 크기 조건에 따라 너비가 정해지지만, “항상 글자만큼 작다”거나 “너비를 지정할 수 없다”는 뜻은 아닙니다. width·min-width·max-width를 지정하거나 부모가 Flex·Grid일 때의 정렬 조건에 따라 크기가 달라질 수 있습니다.

마지막 예제의 .inline에 width: 100%만 추가해 보세요. 컨테이너는 줄의 가로 공간을 채우지만 안의 열은 여전히 60px 두 개입니다. 컨테이너 크기와 내부 열 크기가 별도임을 볼 수 있습니다. 해당 선언을 제거하면 원래의 작은 인라인 격자로 돌아옵니다. 고정 열 너비의 합과 간격이 컨테이너보다 크면 안쪽 내용은 넘칠 수 있으므로 화면을 좁혀 확인해야 합니다.

적용이 안 되면 개발자 도구에서 부모의 계산된 display와 실제 직접 자식 구조를 먼저 확인합니다. 그다음 grid-template-columns가 올바르게 해석되었는지, 더 우선하는 규칙이 display나 열 정의를 덮었는지 봅니다. 예제의 .two를 display: block으로만 바꾸면 자식이 한 줄씩 흐르며 gap도 일반 블록 배치에 Grid 간격처럼 적용되지 않습니다. 비교한 뒤 display: grid로 되돌리세요.