CSS 도구/CSS 그리드 생성기
CSS 그리드 생성기
인터랙티브 비주얼 컨트롤로 복잡한 CSS Grid 레이아웃 디자인
CSS 그리드 가이드
복잡한 2차원 레이아웃을 만드는 방법을 알아보세요
CSS Grid란?
CSS Grid는 열과 행을 모두 처리하는 2차원 레이아웃 시스템입니다. 요소의 배치와 크기를 정밀하게 제어할 수 있어 복잡한 페이지 레이아웃, 대시보드, 이미지 갤러리에 이상적입니다.
사용 방법
- 템플릿 설정을 사용하여 그리드 열과 행 정의
- 그리드 아이템을 추가하고 grid-column/row로 배치
- 간격, 정렬 및 콘텐츠 배분 조정
- 프리셋 레이아웃을 시도하거나 커스텀 디자인 생성
유용한 팁
- fr 단위를 사용하면 사용 가능한 공간에 맞게 유연한 트랙 크기 조정 가능
- minmax() 함수로 미디어 쿼리 없이 반응형 열 생성
- 명명된 그리드 라인과 영역으로 복잡한 레이아웃을 더 읽기 쉽게
브라우저 지원
CSS Grid는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. 전 세계 95% 이상의 커버리지로 프로덕션 사용에 적합합니다.
자주 묻는 질문
fr 단위는 무엇이고 어떻게 사용하나요?
fr(fraction)은 그리드 컨테이너의 사용 가능한 공간을 분할하는 유연한 단위입니다. '1fr 2fr'은 공간을 1:2 비율로 나눕니다. px나 %와 달리 자동으로 공간을 계산하여 배분하므로 반응형 레이아웃에 매우 유용합니다.
grid-template-areas는 어떻게 사용하나요?
grid-template-areas를 사용하면 레이아웃을 시각적으로 정의할 수 있습니다. 각 그리드 영역에 이름을 붙이고 문자열로 배치를 표현합니다. 예: 'header header' 'sidebar main' 'footer footer'. 직관적이고 유지보수가 쉬운 레이아웃을 만들 수 있습니다.
repeat() 함수는 언제 사용하나요?
repeat()은 반복되는 트랙을 간결하게 정의합니다. 'repeat(3, 1fr)'은 '1fr 1fr 1fr'과 같습니다. auto-fill이나 auto-fit과 함께 사용하면 컨테이너 크기에 맞춰 자동으로 열 수가 조절되는 반응형 그리드를 만들 수 있습니다.
그리드 항목이 여러 셀을 차지하게 하려면?
grid-column과 grid-row 속성에 span 키워드를 사용합니다. 'grid-column: span 2'는 2개 열을 차지하고, 'grid-row: 1 / 3'은 1번째 줄부터 3번째 줄까지(2행) 차지합니다. 이를 통해 불규칙한 레이아웃을 쉽게 만들 수 있습니다.
auto-fill과 auto-fit의 차이는 무엇인가요?
둘 다 repeat()과 함께 사용하여 자동으로 열을 생성합니다. auto-fill은 빈 트랙도 유지하여 공간을 채우고, auto-fit은 빈 트랙을 축소하여 콘텐츠가 늘어납니다. 항목 수가 적을 때 auto-fit은 항목을 늘려 공간을 채웁니다.