HTML 코드
<div class="bento">
<div class="t big">핵심 기능</div>
<div class="t wide">빠른 검색</div>
<div class="t">공유</div>
<div class="t">보안</div>
</div>
<style>
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:90px;gap:10px;height:calc(100vh - 32px)}
.t{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;font-weight:600}
.big{grid-column:span 2;grid-row:span 2;background:var(--accent);color:var(--accent-fg)}
.wide{grid-column:span 2}
</style>AI에게 이렇게 요청하세요
기능 소개 섹션에 4열 그리드로 큰 타일 1개(2x2)·가로 긴 타일 1개(2x1)·작은 타일 2개를 둥근 모서리와 옅은 배경으로 배치한 벤토 그리드 만들어줘
<div class="bento">
<div class="t big">핵심 기능</div>
<div class="t wide">빠른 검색</div>
<div class="t">공유</div>
<div class="t">보안</div>
</div>
<style>
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:90px;gap:10px;height:calc(100vh - 32px)}
.t{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;font-weight:600}
.big{grid-column:span 2;grid-row:span 2;background:var(--accent);color:var(--accent-fg)}
.wide{grid-column:span 2}
</style>언제 쓰나
기능·장점 여러 개를 중요도 차이를 두고 한 화면에 보여줄 때. 제품 랜딩 페이지에서 많이 씁니다.
비슷한 것과 차이
- 카드 목록: 같은 크기 카드를 반복 → 동등한 항목 나열용
- 벤토는 타일 크기 자체가 위계를 표현함