🎉 We're live on Product Hunt!
Bento Grid Maker on Product Hunt

Bento Grid Maker

Control Panel

Layout

3
2
6

Style

Preview
Grid Item 1
1x1
Grid Item 2
1x1
Grid Item 3
1x1
Grid Item 4
1x1
Grid Item 5
1x1
Grid Item 6
1x1
Generated Code
<div style="display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));grid-template-rows: repeat(2, minmax(0, 1fr));gap: 1rem" class="min-h-[400px] p-4">
  <div class="bg-gray-800 border border-gray-700 rounded-md aspect-square transition-all duration-200 hover:opacity-80">Grid Item 1</div>
  <div class="bg-gray-800 border border-gray-700 rounded-md aspect-square transition-all duration-200 hover:opacity-80">Grid Item 2</div>
  <div class="bg-gray-800 border border-gray-700 rounded-md aspect-square transition-all duration-200 hover:opacity-80">Grid Item 3</div>
  <div class="bg-gray-800 border border-gray-700 rounded-md aspect-square transition-all duration-200 hover:opacity-80">Grid Item 4</div>
  <div class="bg-gray-800 border border-gray-700 rounded-md aspect-square transition-all duration-200 hover:opacity-80">Grid Item 5</div>
  <div class="bg-gray-800 border border-gray-700 rounded-md aspect-square transition-all duration-200 hover:opacity-80">Grid Item 6</div>
</div>