Grid · 행과 열 배치
행과 열을 함께 정의하는 격자 레이아웃입니다.
기본 문법
.demo { display: grid; grid-template-columns: repeat(2, 1fr); }작은 예제 css
.demo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}화면에서 확인할 것
두 열 격자에서 하나·둘이 첫 줄에, 셋이 다음 줄에 배치됩니다.
헷갈리기 쉬운 점
- 1fr은 남는 공간을 비율로 나눕니다. 고정 픽셀 너비와 같은 뜻은 아닙니다.
- 긴 내용으로 열이 넘치면 minmax(0, 1fr)와 내부 요소의 줄바꿈을 함께 살펴보세요.