[CSS] grid-template-columns

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

🔧 구성 요소 설명

✅ grid-template-columns

• CSS Grid의 열 너비를 설정하는 속성입니다.

✅ repeat(3, 1fr)

• repeat() 함수는 같은 값을 반복할 때 사용하는 축약 문법입니다.
• repeat(3, 1fr)는 1fr 1fr 1fr와 동일한 의미입니다.
• 여기서 fr은 **fractional unit (비율 단위)**로, 남은 공간을 균등하게 나누는 단위입니다.

🎯 의미 정리

그리드를 3개의 열로 나누되,
각 열의 너비를 동일하게 (1fr) 설정하겠다는 뜻입니다.

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

이렇게 하면 3개의 칸이 수평으로 균등하게 배치됩니다.

---

필요하다면 repeat(4, 1fr)로 4칸,
repeat(2, 2fr) 등으로 비율도 다르게 설정할 수 있어요.

궁금한 점 더 있으면 편하게 물어보세요!