About this snippet

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.

Size
5.4 KB
Uses
HTML, CSS
Loads
placehold.co
Views
387

Collections

Related snippets

<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>
* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  background: #09090b;
  color: #fff;
  padding: 40px;
  min-height: 100vh;
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Tablet & Desktop: 4 columns */
@media (min-width: 600px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }
}
@media (min-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 220px);
  }
  
  /* Grid Placement Areas */
  .profile-tile {
    grid-column: span 2;
    grid-row: span 1;
  }
  .graph-tile {
    grid-column: span 2;
    grid-row: span 1;
  }
  .stats-tile {
    grid-column: span 1;
    grid-row: span 1;
  }
  .weather-tile {
    grid-column: span 1;
    grid-row: span 1;
  }
  .list-tile {
    grid-column: span 2;
    grid-row: span 1;
  }
}

.tile {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.tile:hover {
  transform: translateY(-2px);
  border-color: #3f3f46;
  background: #202023;
}

h3 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  color: #a1a1aa;
  font-weight: 500;
}

/* Profile Tile */
.profile-tile {
  justify-content: center;
  background: linear-gradient(145deg, #18181b 0%, #0f0f12 100%);
}
.tile-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tile-header img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.tile-header h3 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
}
.tile-header p {
  margin: 4px 0 0 0;
  color: #71717a;
  font-size: 0.9rem;
}
.tile-content p {
  margin-top: 16px;
  color: #a1a1aa;
  line-height: 1.5;
}

/* Stats Tile */
.big-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin-top: auto;
}
.trend {
  font-size: 0.9rem;
  margin-top: 4px;
}
.trend.positive { color: #22c55e; }

/* Graph Tile */
.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  gap: 8px;
  margin-top: 16px;
}
.bar {
  flex: 1;
  background: #3b82f6;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.bar:hover { opacity: 1; }

/* Weather Tile */
.weather-tile {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  justify-content: space-between;
  border: none;
}
.weather-tile .temp {
  font-size: 3rem;
  font-weight: 700;
}
.weather-tile .location {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* List Tile */
.file-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}
.file-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #27272a;
  color: #d4d4d8;
  font-size: 0.95rem;
}
.file-list li:last-child { border-bottom: none; }
.icon { 
  opacity: 0.7; 
  display: flex;
  align-items: center;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save