CSS 예제 10 / 20
Grid 는 가로·세로(2차원) 를 동시에 다루는 레이아웃입니다. 열 개수와 간격을 바꿔보세요.
grid
grid-template-columns
gap
💡 이렇게 바꿔보세요
repeat(3, 1fr) 은 '동일한 비율(1fr) 열을 3개'라는 뜻 — 1fr 2fr 1fr 처럼 비율을 다르게도 줄 수 있어요grid-template-columns: 100px 1fr 처럼 고정폭 + 나머지 채우기 조합도 자주 써요- 더 다양한 열 개수를 슬라이더로 만져보려면 Flexbox & Grid 도구를 확인해보세요
← CSS 예제 목록