벤토 그리드 생성기
반응형 레이아웃을 즉시 제작하세요. 애플 스타일의 세련된 대시보드 그리드를 무제한으로 만들 수 있습니다.
템플릿 (Presets)
그리드 설정
반응형 미리보기
실시간 미리보기
대표 항목
항목 1
항목 2
섹션
항목 3
항목 4
각 셀을 클릭하여 개별적으로 편집할 수 있습니다.
code.output
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 16px;
}
.bento-item-1 {
grid-row: span 2;
grid-column: span 2;
background-color: #f5f5f7;
border-radius: 16px;
padding: 16px;
}
.bento-item-2 {
grid-row: span 1;
grid-column: span 1;
background-color: #e8e8ed;
border-radius: 16px;
padding: 16px;
}
.bento-item-3 {
grid-row: span 1;
grid-column: span 1;
background-color: #d2d2d7;
border-radius: 16px;
padding: 16px;
}
.bento-item-4 {
grid-row: span 1;
grid-column: span 2;
background-color: #f5f5f7;
border-radius: 16px;
padding: 16px;
}
.bento-item-5 {
grid-row: span 1;
grid-column: span 1;
background-color: #e8e8ed;
border-radius: 16px;
padding: 16px;
}
.bento-item-6 {
grid-row: span 1;
grid-column: span 1;
background-color: #d2d2d7;
border-radius: 16px;
padding: 16px;
}2026년에 벤토 그리드(Bento Grid) 생성기가 필수적인 이유
ColorUxLab의 벤토 그리드 생성기는 조직적이고 비대칭적인 레이아웃을 구현하려는 전문가를 위한 최고의 도구입니다. 복잡한 계산 없이 시각적으로 대시보드와 포트폴리오를 설계하세요.
유연함
자유로운 셀 확장 기능으로 독창적인 비대칭 구조를 만듭니다.
반응형
모바일에서도 완벽하게 작동하는 레이아웃을 즉시 확인하세요.
클린 코드
최적화된 CSS와 Tailwind 코드를 즉시 프로덕션에 적용합니다.
자주 묻는 질문
Tailwind를 지원하나요?
네, 표준 CSS와 함께 테일윈드 유틸리티 클래스 추출 옵션을 제공합니다.
모바일 반응형인가요?
토글 기능을 통해 다양한 화면 크기에서의 레이아웃을 최적화할 수 있습니다.