← Docs

Grid Layout Patterns

Responsive recipe grids for the Meridian dashboard.

Two-Column Card Grid

Standard layout for browsing recipes. Cards stretch full width on mobile, split into two columns at md breakpoint.

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  <div className="bg-[#1a1025] rounded-xl p-5 border border-[#8B5CF6]/10">
    <div className="h-40 bg-[#8B5CF6]/10 rounded-lg mb-3" />
    <h3 className="font-semibold">Recipe Name</h3>
    <p className="text-gray-500 text-sm">Short description...</p>
  </div>
  {/* repeat cards */}
</div>

Three-Column Dense Grid

Compact layout for search results or library views. Scales from one to three columns.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* smaller card variant */}
</div>

Featured + Sidebar

Hero recipe spans two columns on desktop, with a sidebar of smaller cards.

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <div className="lg:col-span-2">{/* featured card */}</div>
  <div className="flex flex-col gap-4">{/* sidebar cards */}</div>
</div>

Masonry Alternative

For variable-height content, use columns instead of grid.

<div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
  <div className="break-inside-avoid bg-[#1a1025] rounded-xl p-4 border border-[#8B5CF6]/10">
    {/* card content */}
  </div>
</div>