Skip to content
HyperUI

No results found.

Back to application components

Grids

Responsive grid layouts and grid systems for web applications with customizable columns and rows. Flexible grid components for dashboards, admin panels, and content organization.

0/10 Dark Mode (Request)Updated: N/ANo commit information available.

1x1

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8">
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
</div>

1x2

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8">
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300 lg:col-span-2"></div>
</div>

2x1

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8">
  <div class="h-32 rounded bg-gray-300 lg:col-span-2"></div>
  <div class="h-32 rounded bg-gray-300"></div>
</div>

1x1x1

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8">
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
</div>

1x1x1x1

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8">
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
</div>

1x1x2

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8">
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300 lg:col-span-2"></div>
</div>

2x1x1

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8">
  <div class="h-32 rounded bg-gray-300 lg:col-span-2"></div>
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
</div>

1x2x1

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8">
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300 lg:col-span-2"></div>
  <div class="h-32 rounded bg-gray-300"></div>
</div>

Sidebar left

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-[120px_1fr] lg:gap-8">
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
</div>

Sidebar right

markmead

<div class="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_120px] lg:gap-8">
  <div class="h-32 rounded bg-gray-300"></div>
  <div class="h-32 rounded bg-gray-300"></div>
</div>

Related components

View all application components