CSS 그리드는 카드, 대시보드, 레이블-트랙-값 행, 사이드바가 있는 페이지 등 2차원의 모든 항목에 대한 레이아웃 시스템입니다. 부모의 열을 선언하면 자식이 해당 열에 속하게 됩니다.
기억할 가치가 있는 한 줄은 grid-template-columns: repeat(auto-fit, minmax(170px, 1fr))입니다. 이는 컨테이너가 허용하는 만큼 170px 이상의 열에 적합하고 나머지를 래핑하므로 노트북은 4개의 카드를 얻고 휴대폰은 미디어 쿼리 없이 카드를 1개 얻습니다.
이 가이드는 해당 선언을 단어별로 읽고 자동 맞춤과 자동 채우기, 간격 및 정렬, Flexbox가 더 나은 도구에 대해 설명합니다.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px;
}
노트북에 카드 4개, 태블릿에 2개, 휴대폰에 1개. 미디어 쿼리도, 중단점도, 유지 관리할 것도 없습니다.
CSS 그리드 선언 읽기
repeat(auto-fit, …)— 적합한 만큼 많은 열을 만듭니다.minmax(170px, 1fr)— 각각 최소 170px이고 남은 공간을 균등하게 공유합니다.
따라서 브라우저는 사용 가능한 너비를 170으로 나누고 그 만큼의 열을 만든 다음 늘려서 채웁니다. 하나의 열인 360px 휴대폰에서; 1200px에서는 6입니다.
이 한 줄은 이전에 필요했던 대부분의 미디어 쿼리를 대체합니다.
자동 맞춤 또는 자동 채우기
/* two items in a wide container */
repeat(auto-fit, minmax(170px, 1fr)) /* two wide items filling the row */
repeat(auto-fill, minmax(170px, 1fr)) /* two 170px items and empty space */
auto-fit는 빈 트랙을 축소하여 실제 항목이 늘어납니다. auto-fill는 이를 유지하면서 오른쪽에 공백을 남깁니다.
카드와 대시보드의 경우 auto-fit를 원합니다. auto-fill는 열 위치가 행 집합 전체에서 일관성을 유지해야 하는 경우에 적합합니다.
알아두면 좋은 속성
.layout {
display: grid;
grid-template-columns: 220px 1fr; /* fixed sidebar, flexible main */
gap: 20px;
}
.row {
display: grid;
grid-template-columns: 130px 1fr 62px; /* label, bar, value */
align-items: center;
gap: 11px;
}
.full { grid-column: 1 / -1; } /* span every column */
이 세 가지 패턴은 실제 레이아웃의 큰 부분을 차지합니다.
| 패턴 | 사용 |
|---|---|
repeat(auto-fit, minmax(…, 1fr)) |
카드, 타일, 리플로우해야 하는 모든 것 |
220px 1fr |
콘텐츠 옆의 사이드바 |
130px 1fr 62px |
A 막대형 차트 행 — 레이블, 추적, 값 |
grid-column: 1 / -1 |
그리드 내부의 전체 너비 요소 |
오버플로 트랩
1fr는 "여유 공간의 한 공유"를 의미하지만 암시적 최소값인 auto(콘텐츠 크기)도 갖습니다. 따라서 긴 URL이나 넓은 테이블과 같이 축소할 수 없는 항목이 포함된 그리드 항목은 열을 해당 공유보다 넓게 밀어내고 그리드가 오버플로됩니다.
/* the fix */
.cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
/* or on the item */
.card { min-width: 0; }
minmax(0, 1fr)를 사용하면 트랙을 콘텐츠 이하로 줄일 수 있습니다. 이는 휴대폰에서 그리드 레이아웃이 옆으로 스크롤되는 가장 일반적인 원인이며, 마크업에 잘못된 부분이 없기 때문에 검사로 찾기가 어렵습니다.
여백이 아닌 간격
/* good */ .cards { gap: 10px; }
/* avoid */ .card { margin: 5px; }
gap는 외부 가장자리에 공간을 추가하지 않고 항목 사이에 간격을 둡니다. 여백은 그렇습니다. 따라서 여백 기반 그리드는 항상 음수 여백으로 수정되어야 하는 방식으로 컨테이너에서 약간 삽입됩니다.
그리드 또는 가변상자
| 그리드 | 플렉스박스 | |
|---|---|---|
| 행과 열을 함께 | 예 | 한 번에 한 방향으로 |
| 동일한 열 | 자연적인 | 각각에 flex: 1가 필요합니다. |
| 항목 크기 자체 | 아니요 - 트랙이 결정됩니다. | 예 |
| 오른쪽으로 밀린 항목이 있는 도구 모음 | 어색하다 | 자연적인 |
| 카드 그리드 | 자연적인 | 포장 및 너비가 필요합니다. |
경험 법칙: 컨테이너의 모양을 정의할 때는 그리드를 사용하고, 항목을 선을 따라 배포할 때는 flexbox를 사용합니다. 페이지 레이아웃은 그리드입니다. 일련의 버튼은 flexbox입니다.
프롬프트에서 무엇을 요청해야 할까요?
Grids with repeat(auto-fit, minmax(170px, 1fr)) and gap.
Never a fixed column count. Use minmax(0, 1fr) so nothing overflows.
생성된 CSS의 기본값은 repeat(4, 1fr)이며, 이는 휴대폰에서 옆으로 스크롤되는 주요 원인입니다.
비용이 가장 많이 드는 세 가지 그리드 실수
하드 코딩된 열 수. grid-template-columns: repeat(4, 1fr)는 모든 너비에 4개의 열이 있으므로 전화기에는 각각 80px 너비의 4개의 열이 있습니다. 대신 최소값으로 auto-fit를 사용하고 개수는 공백을 따릅니다.
최소 휴대폰보다 넓습니다. minmax(400px, 1fr)는 360px 화면에 맞지 않아 단일 열이 넘칩니다. 카드의 경우 최소값을 약 170px 이하로 유지하거나 minmax(min(100%, 400px), 1fr)를 사용하여 컨테이너를 초과하지 않도록 하세요.
Flex가 필요한 그리드. 레이블, 막대 및 값의 단일 행은 Flex 행입니다. 그리드는 작동하지만 명시적인 열 크기를 원합니다. Flexbox는 한 줄을 더 잘 수행합니다.
전체 페이지에 대한 그리드
같은 아이디어가 확장됩니다. 사이드바와 콘텐츠가 있는 페이지는 넓은 화면에서는 grid-template-columns: 220px 1fr이고 좁은 화면에서는 하나의 열이며 단일 미디어 쿼리로 전환됩니다.
이름이 지정된 영역 grid-template-areas를 사용하면 레이아웃을 텍스트로 그릴 수 있습니다. 헤더는 상단에, 사이드바와 메인은 가운데에, 바닥글은 아래에 있으며 텍스트를 다시 작성하여 휴대폰에 맞게 재정렬할 수 있습니다.
이는 대부분의 문서에 대한 전체 페이지 레이아웃으로, 12줄입니다.
그리드를 사용하여 카드 레이아웃: 4단계
display: grid를 상위 항목에 배치합니다. 하위 항목은 그리드 항목이 됩니다. 각각 주위에 래퍼가 없습니다.- 자동 맞춤 및 최소값을 사용하여 열을 선언합니다.
repeat(auto-fit, minmax(170px, 1fr)). 카드가 읽을 수 있는 가장 좁은 최소값을 선택합니다. - 여백 대신
gap를 추가합니다.gap: 10px는 하나의 속성으로 셀을 양방향으로 간격을 두고 가장자리에서는 아무것도 두 배로 늘어나지 않습니다. - 360px에서 확인하세요. 카드는 한 열에 쌓여야 합니다. 무언가가 오버플로되면 너비가 고정됩니다. 모바일 레이아웃 가이드에는 일반적인 원인이 나열되어 있습니다.