CSS Grid란?
CSS Grid Layout은 행과 열을 사용하여 복잡한 그리드 기반 디자인을 만들 수 있는 2차원 레이아웃 시스템입니다. 한 번에 하나의 차원만 처리하는 Flexbox와 달리, Grid는 요소의 가로 및 세로 위치를 완전히 제어할 수 있습니다.
생성기 사용법
- 그리드 레이아웃의 열과 행 수를 설정합니다.
- 간격 값을 조정하여 그리드 셀 간의 간격을 제어합니다.
- 미리보기가 실시간으로 업데이트되어 그리드 레이아웃을 보여줍니다.
- 생성된 CSS 코드를 프로젝트의 스타일시트에 복사합니다.
자주 묻는 질문
1fr은 무엇을 의미하나요?
fr 단위는 그리드 컨테이너에서 사용 가능한 공간의 비율을 나타냅니다. repeat(3, 1fr)은 공간을 균등하게 분배하는 세 개의 동일 너비 열을 만듭니다.
고정 열과 유연한 열을 혼합할 수 있나요?
네. 200px 1fr 1fr처럼 fr 단위와 고정 크기를 조합하여 사이드바와 유연한 메인 콘텐츠 영역이 있는 레이아웃을 만들 수 있습니다.