Bento Grid 디자인이 뭔가요?

Bento Grid는 Apple 발표에서 유행한 격자 레이아웃 디자인입니다. 일본 도시락(弁当)처럼 다양한 크기의 카드를 격자에 배치합니다.

/* CSS Grid로 Bento 레이아웃 */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}
.bento-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bento-item:nth-child(2) { grid-column: span 2; }
.bento-item:nth-child(3) { grid-row: span 2; }

특징:

• 다양한 크기의 카드가 빈틈없이 배치
• 시각적 위계가 명확 (큰 카드 = 중요)
• 대시보드, 포트폴리오, 소개 페이지에 적합

Apple, Linear, Vercel 등 테크 회사 사이트에서 많이 볼 수 있습니다.