design
무료
회원가입 불필요
QR 코드 생성기
항목을 셀 위로 드래그하여 CSS Grid 레이아웃을 시각적으로 빌드하고 CSS를 내보내세요.
도구를 불러오는 중…
이 도구에 대해
사용자 정의 트랙 크기(fr, px, %, auto)로 열과 행을 정의하고 간격을 설정하고, 라이브 그리드 미리보기에서 클릭 드래그하여 여러 셀에 걸쳐 항목을 배치하세요. 도구는 바로 복사할 수 있는 grid-template-columns, grid-template-rows, gap, grid-column/grid-row 선언을 생성합니다. 선택적으로 명명된 그리드 영역을 할당하세요.
사용 방법
- 1 1단계: 열(1~12)과 행(1~8)의 수와 간격 크기를 설정하세요.
- 2 2단계: fr, px, % 또는 auto 단위를 사용하여 각 열과 행의 트랙 크기를 입력하세요.
- 3 3단계: 그리드 셀에서 클릭하고 드래그하여 항목을 배치하고 크기를 조정하세요.
- 4 4단계: 생성된 CSS를 복사하여 스타일시트에 붙여 넣으세요.