About this snippet

Showcase your work with a modern bento box portfolio. We used CSS Grid to fit different sized cards together perfectly, so you get an incredibly clean layout just for your projects.

Size
3.2 KB
Uses
HTML, CSS
Loads
Nothing external
Views
254

Collections

Related snippets

<div class="bento-container">
  <div class="bento-header">
    <h2>My Portfolio</h2>
    <p>A beautiful grid layout perfect for designers.</p>
  </div>
  
  <div class="bento-grid">
    <div class="bento-card span-2 highlight-card">
      <h3>Frontend Development</h3>
      <p>Building beautiful, fast, and accessible user interfaces.</p>
    </div>
    <div class="bento-card regular-card">
      <div class="card-icon">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
      </div>
      <h4>UI Design</h4>
    </div>
    <div class="bento-card regular-card">
      <div class="card-icon">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#ec4899" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
      </div>
      <h4>Consulting</h4>
    </div>
    <div class="bento-card span-row dark-card">
      <h3>Mobile Apps</h3>
      <p>Creating seamless experiences for iOS and Android.</p>
    </div>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 40px 20px;
}

.bento-container {
  width: 100%;
  max-width: 800px;
}

.bento-header {
  margin-bottom: 30px;
}

.bento-header h2 {
  font-size: 2.5rem;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.bento-header p {
  color: #64748b;
  font-size: 1.125rem;
  margin: 0;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 180px;
  gap: 20px;
}

.bento-card {
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.span-2 {
  grid-column: span 2;
}

.span-row {
  grid-row: span 2;
}

.highlight-card {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
}

.highlight-card h3 { color: #1e3a8a; margin: 0 0 8px 0; font-size: 1.5rem; }
.highlight-card p { color: #3b82f6; margin: 0; font-weight: 500; }

.regular-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.card-icon {
  background: #f1f5f9;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.regular-card h4 { color: #0f172a; margin: 0; font-size: 1.125rem; }

.dark-card {
  background: #0f172a;
  color: #ffffff;
}

.dark-card h3 { margin: 0 0 8px 0; font-size: 1.5rem; }
.dark-card p { color: #94a3b8; margin: 0; }

/* Responsive adjustments */
@media (max-width: 600px) {
  .span-2 { grid-column: span 1; }
  .bento-grid { grid-auto-rows: 200px; }
}

      

          


    

    
  

  















  
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