Layout layoutgriddashboard

Bento Grid (3 Column)

Modern dashboard grid inspired by Bento-box layouts.

Component preview not available for: bento-grid-3

Ensure the filename matches BentoGrid3.astro

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { BentoGrid(3Column) } from 'astro-component-kit';
---

<BentoGrid3>Content</BentoGrid3>
--- import { BentoGrid(3Column) } from 'astro-component-kit'; --- <BentoGrid3>Content</BentoGrid3>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/BentoGrid(3Column).astro and paste the following code:

astro 
---
---
<div class="bento">
  <div class="item wide"><slot name="1" /></div>
  <div class="item"><slot name="2" /></div>
  <div class="item"><slot name="3" /></div>
  <div class="item tall"><slot name="4" /></div>
</div>
<style>
  .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: 1rem; }
  .item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 1rem; }
  .wide { grid-column: span 2; }
  .tall { grid-row: span 2; }
</style>
--- --- <div class="bento"> <div class="item wide"><slot name="1" /></div> <div class="item"><slot name="2" /></div> <div class="item"><slot name="3" /></div> <div class="item tall"><slot name="4" /></div> </div> <style> .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: 1rem; } .item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 1rem; } .wide { grid-column: span 2; } .tall { grid-row: span 2; } </style>

Quick Info

Category
Layout
Filename
BentoGrid(3Column).astro
Dependencies
None — pure Astro + CSS
Tags
layoutgriddashboard