이 편에서 만드는 파일

web-practice/portfolio/
└ css/
  └ styles.css   ~ (.project-grid 규칙 추가)

개념 정리

지금까지 배운 Flexbox는 한 방향(가로 또는 세로)으로 아이템을 나열하는 1차원 레이아웃입니다. 프로젝트 카드처럼 가로와 세로를 동시에 맞춰야 하는 배열에는 2차원 레이아웃인 CSS Grid가 더 알맞습니다.

grid-template-columns: repeat(3, 1fr)은 1fr 1fr 1fr을 줄여 쓴 표현입니다. repeat(반복 횟수, 트랙 크기) 형태로, 열 개수가 늘어나도 반복 부분만 고치면 됩니다.

fr 단위는 픽셀 같은 고정 단위와 다릅니다. 컨테이너 너비에서 gap을 뺀 나머지 공간을 지정한 비율대로 나눕니다. 1fr 1fr 1fr이면 세 열이 항상 똑같이 나눠 가지므로, 화면 폭이 바뀌어도 매번 값을 다시 계산할 필요가 없습니다.

자주 하는 오해: display: grid를 잊고 grid-template-columns만 쓰면 아무 효과가 없습니다. grid-template-columns는 요소가 이미 grid 컨테이너일 때만 의미가 있는 속성입니다.

실습

<!-- projects.html (수정하지 않음, 구조만 참고) -->
<div class="project-grid">
  <article class="project-card" data-tags="JavaScript,PWA">
    <img src="images/project-01.svg" alt="오늘의 날씨 카드 썸네일" width="1200" height="800" />
    <h2>오늘의 날씨</h2>
    <p>위치 기반 날씨를 카드로 보여주는 웹앱입니다. 오프라인에서도 마지막 데이터를 보여줍니다.</p>
  </article>
  <!-- 카드 2~6도 같은 구조 -->
</div>

/* css/styles.css (일부) */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.fixed-grid {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 8px;
margin-bottom: 16px;
}
.fr-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.box {
background: #dbeafe;
padding: 12px;
text-align: center;
}

미리보기 창의 폭을 좁혀 보면 fixed-grid는 고정 너비를 유지하려다 넘치고, fr-grid는 컨테이너 폭에 맞춰 세 열이 계속 균등하게 줄어듭니다.

직접 해보기

1. grid-template-columns를 repeat(2, 1fr)로 바꿔 카드가 2열로 바뀌는지 확인한 뒤 repeat(3, 1fr)로 되돌립니다.
2. grid-template-columns: repeat(3, 1fr)을 1fr 2fr 1fr로 바꿔 가운데 열만 두 배 넓어지는 것을 확인합니다.

/* 확인용 임시 실습. 확인 후 repeat(3, 1fr)로 되돌린다 */
.project-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-6);
}

자주 하는 실수

확인 문제

참고 자료

• MDN — Basic concepts of grid layout