한 줄 요약
크기비율이 다른 카드를 12-col 그리드에 비대칭으로 배치해, 핵심 기능을 한 화면으로 요약하는 섹션 패턴.
이럴 때 필요해요
SaaS 홈에서 "우리 제품 6가지 강점"을 균일한 32 그리드에 깔면 시선이 좌상우하로 단조롭게 흐릅니다. Bento는 큰 카드에 시선을 모아 의도한 강점을 먼저 읽히게 한 다음, 나머지 카드들을 부수적으로 훑게 만들죠. AppleLinearVercelNotion 같은 톤이 강한 브랜드의 홈에서 사실상 표준.
어떻게 동작하나
1. 모바일은 grid-cols-1로 stack, 데스크탑(md 768)부터 grid-cols-12로 확장합니다.
2. 큰 카드는 col-span-7 row-span-2로 좌측 두 줄을 차지, 그 옆 두 카드는 col-span-5로 각각 한 줄.
3. 하단 셋은 col-span-4로 1/3씩 나눠 균형을 잡습니다.
4. auto-rows-[200px]로 행 높이 고정 카드마다 콘텐츠 양이 달라도 그리드가 흔들리지 않게.
놓치기 쉬운 것
- row-span이 들어가면 후속 카드들이 자동 흐름을 따라가지 못해 빈칸이 생기기 쉽습니다 큰 카드의 폭(col-span)과 옆 카드들의 합이 정확히 12가 되는지 다시 셉니다.
- 모바일에서 row-span을 그대로 두면 빈 영역이 생깁니다. md:row-span-2처럼 breakpoint를 붙여서 모바일은 자연 흐름이 되게.
- 카드마다 visual의 무게가 다르면 시선이 한쪽으로 쏠립니다. 큰 카드만 화려하게 두고 나머지는 톤을 낮춰 균형.
이런 곳에 써요
- SaaS앱 랜딩의 "기능 한눈에" 섹션
- 디자인 시스템 홈의 카테고리 안내
- 포트폴리오 메인의 작업 카테고리