01
3×2
W
H
02
3×1
W
H
03
2×1
W
H
04
2×2
W
H
05
2×1
W
H
06
4×1
W
H
code
<!-- HTML -->
<div class="bento-grid">
<div class="bento-item item-1"></div>
<div class="bento-item item-2"></div>
<div class="bento-item item-3"></div>
<div class="bento-item item-4"></div>
<div class="bento-item item-5"></div>
<div class="bento-item item-6"></div>
</div>
/* CSS */
.bento-grid {
--grid-gap: 1rem;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: calc((100% - (5 * var(--grid-gap))) / 6);
gap: var(--grid-gap);
}
.bento-item {
aspect-ratio: 1 / 1;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.14) 100%);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.20);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.item-1 { grid-column: span 3; grid-row: span 2; aspect-ratio: 3 / 2; }
.item-2 { grid-column: span 3; grid-row: span 1; aspect-ratio: 3 / 1; }
.item-3 { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1; }
.item-4 { grid-column: span 2; grid-row: span 2; aspect-ratio: 2 / 2; }
.item-5 { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1; }
.item-6 { grid-column: span 4; grid-row: span 1; aspect-ratio: 4 / 1; }