14강. Grid로 2차원 배치하기

이번 강의의 결과물은 프로젝트 카드를 행과 열에 맞춰 배치하는 2열 갤러리입니다.

?1. 이번 강의에서 해결할 문제

프로젝트가 늘어나면 한 줄 정렬만으로는 카드의 열을 맞추기 어렵습니다. 행과 열을 동시에 가진 격자를 만들고 카드가 빈 칸에 자동 배치되도록 CSS Grid를 사용합니다.

✓학습 목표

• 프로젝트가 늘어나면 한 줄 정렬만으로는 카드의 열을 맞추기 어렵습니다. 행과 열을 동시에 가진 격자를 만들고 카드가 빈 칸에 자동 배치되도록 CSS Grid를 사용합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• grid 컨테이너: display: grid가 적용된 부모
• grid 아이템: 컨테이너의 직접 자식
• 열·행 트랙: 아이템이 배치되는 가로·세로 줄
• grid-template-columns: 열 개수와 크기 정의
• fr: 사용 가능한 공간의 비율 단위
• gap: 행과 열 사이 간격

grid-template-columns: repeat(2, 1fr);

위 코드는 사용 가능한 너비를 같은 비율의 두 열로 나눕니다. Flexbox가 한 축 중심이라면 Grid는 행과 열을 함께 맞추는 2차원 배치에 적합합니다. W3C Grid 표준

</>3. 코드 예시

파일명: web-basics/portfolio/index.html

프로젝트 카드들을 레이아웃용 div로 묶습니다.

<section id="projects">
  <h2>프로젝트</h2>

  <div class="project-grid">
    <article class="project-card">
      <h3>게임플레이 기능 프로젝트</h3>
      <p>Unreal C++로 상호작용 기능을 구현합니다.</p>
    </article>

    <article class="project-card">
      <h3>반응형 포트폴리오</h3>
      <p>HTML과 CSS로 여러 화면 크기에 대응합니다.</p>
    </article>

    <article class="project-card">
      <h3>학습 기록 저장소</h3>
      <p>Git으로 강의와 실습 변경 이력을 관리합니다.</p>
    </article>
  </div>
</section>

파일명: web-basics/portfolio/css/style.css

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.project-card {
  padding: 1.5rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. .project-grid가 Grid 컨테이너가 되고 직접 자식 article들이 Grid 아이템이 됩니다.
2. repeat(2, 1fr)가 같은 크기의 두 열을 만듭니다.
3. 첫 두 카드는 첫 행의 두 열에, 세 번째 카드는 다음 행의 첫 열에 자동 배치됩니다.
4. gap이 모든 행과 열 사이에 동일한 간격을 만듭니다.
5. 레이아웃만 위한 div는 콘텐츠 의미를 바꾸지 않고 Grid 컨테이너 역할을 담당합니다.

이 단계의 고정 2열은 매우 좁은 화면에서 불편할 수 있습니다. 다음 강의에서 기본 1열로 시작하고 화면 공간이 충분할 때만 2열로 바꿉니다.

!5. 자주 하는 실수

• Grid 컨테이너가 아닌 카드에 grid-template-columns를 작성함
• 직접 자식이 아닌 더 깊은 요소가 Grid 아이템이라고 생각함
• 1fr 1fr과 고정 px 열을 목적 없이 섞음
• 카드마다 margin을 넣어 gap과 간격이 중복됨
• 콘텐츠 의미를 바꾸면서까지 Grid 구조에 맞춘 HTML을 작성함
• Flexbox와 Grid 중 무엇이든 항상 하나만 써야 한다고 생각함

✎6. 짧은 실습 과제

1. 프로젝트를 세 개 이상 만들고 .project-grid로 묶습니다.
2. 열을 1개, 2개, 3개로 바꾸어 카드 배치를 비교합니다.
3. gap을 행·열 모두 0으로 만든 뒤 다시 복구합니다.
4. 카드 설명 길이를 다르게 작성하고 각 행의 배치를 관찰합니다.
5. 개발자 도구의 Grid 오버레이를 켜서 열과 행 선을 확인합니다.
6. 메뉴에는 Flexbox, 카드 목록에는 Grid가 적합한 이유를 한 문장씩 적습니다.

완료 기준은 프로젝트 수가 바뀌어도 HTML 위치를 수동 계산하지 않고 Grid가 행과 열에 자동 배치하는 것입니다.

?7. 이해 점검 질문 3개

1. Flexbox와 Grid는 각각 어떤 종류의 배치에 적합한가요?
2. repeat(2, 1fr)은 사용 가능한 공간을 어떻게 나누나요?
3. Grid 아이템이 되는 요소는 컨테이너와 어떤 관계에 있어야 하나요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.