무엇을 배울 수 있나요?
열 수는 한 줄의 칸 수, gap은 칸 사이의 여백입니다. 1fr은 남은 공간을 나누는 같은 비율입니다. 이 도구는 모든 항목의 높이가 같은 기본 배치를 보여줍니다.
Order starts with a few lines
생각한 배치,
눈앞의 그리드.
열과 여백을 움직여 보세요. 코드와 화면이 함께 바뀌어, CSS Grid의 규칙이 손에 잡힙니다.
배치 설정
배치 미리보기
01 = 첫 항목남은 공간은 동일한 비율로
CSS · 텍스트를 선택해 복사
3열에서 한 칸 넓히기
기본값은 3열, 8항목, 첫 항목 2열입니다. 첫 항목이 두 칸을 차지하므로 전체는 3행이 됩니다. 첫 항목을 3열로 바꾸면 첫 줄을 모두 사용합니다.
실제 화면에 적용할 때
결과 CSS의 .grid 안에 .item 요소를 항목 수만큼 넣으세요. 실제 글자 길이와 이미지 비율은 별도로 확인해야 합니다. 모바일에서는 미디어 쿼리로 열 수를 줄이는 방법도 고려하세요.
MDN Grid 기본 개념 ↗