<div class="bento-grid">
<div class="tile profile-tile">
<div class="tile-header">
<img src="https://placehold.co/100x100/3b82f6/ffffff?text=U" alt="User">
<div>
<h3>Alex Designer</h3>
<p>Pro Member</p>
</div>
</div>
<div class="tile-content">
<p>Welcome back to your dashboard. You have 3 pending tasks.</p>
</div>
</div>
<div class="tile stats-tile">
<h3>Revenue</h3>
<div class="big-number">$42.5k</div>
<div class="trend positive">▲ 12%</div>
</div>
<div class="tile graph-tile">
<h3>Weekly Traffic</h3>
<div class="chart-bars">
<div class="bar" style="height: 40%"></div>
<div class="bar" style="height: 70%"></div>
<div class="bar" style="height: 50%"></div>
<div class="bar" style="height: 100%"></div>
<div class="bar" style="height: 60%"></div>
<div class="bar" style="height: 85%"></div>
<div class="bar" style="height: 45%"></div>
</div>
</div>
<div class="tile weather-tile">
<div class="temp">24°</div>
<div class="location">London, UK</div>
</div>
<div class="tile list-tile">
<h3>Recent Files</h3>
<ul class="file-list">
<li>
<span class="icon">
<!-- File Icon -->
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
Project_Brief.pdf
</li>
<li>
<span class="icon">
<!-- Image Icon -->
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</span>
Mockup_v2.png
</li>
<li>
<span class="icon">
<!-- Chart Icon -->
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
</span>
Q1_Report.xlsx
</li>
</ul>
</div>
</div>
Back to Snippets
Modern Bento Grid Layout CSS
Organize your content with this trendy bento grid layout. We use CSS Grid to create a modular, tile-based design that looks professional and adapts elegantly to different screen sizes.
290