Grid Utilities

Grid Display

Enable grid layout:

<!-- Basic grid container -->
<div class="bismillah-grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Inline grid -->
<div class="bismillah-inline-grid">
  <div>Item</div>
</div>

Grid Columns

Define the number of columns:

<!-- 1 column -->
<div class="bismillah-grid bismillah-grid-cols-1">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- 2 columns -->
<div class="bismillah-grid bismillah-grid-cols-2">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- 3 columns -->
<div class="bismillah-grid bismillah-grid-cols-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- 4 columns -->
<div class="bismillah-grid bismillah-grid-cols-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

<!-- 6 columns -->
<div class="bismillah-grid bismillah-grid-cols-6">
  <!-- More items -->
</div>

<!-- 12 columns (Bootstrap-like) -->
<div class="bismillah-grid bismillah-grid-cols-12">
  <!-- For fine-grained layouts -->
</div>

Grid Rows

Define the number of rows:

<!-- 3 rows -->
<div class="bismillah-grid bismillah-grid-rows-3">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Gap

Add spacing between grid items:

<!-- Gap between cells -->
<div class="bismillah-grid bismillah-grid-cols-3 bismillah-gap-4">
  <div class="bismillah-bg-gray-100 bismillah-p-4">Item 1</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Item 2</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Item 3</div>
</div>

<!-- Horizontal gap only -->
<div class="bismillah-grid bismillah-grid-cols-2 bismillah-gap-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Vertical gap only -->
<div class="bismillah-grid bismillah-grid-cols-2 bismillah-gap-y-6">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Grid Item Span

Make items span multiple columns:

<div class="bismillah-grid bismillah-grid-cols-3 bismillah-gap-4">
  <!-- Spans 2 columns -->
  <div class="bismillah-col-span-2 bismillah-bg-blue-500 bismillah-text-white bismillah-p-4">
    Wide item
  </div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Item</div>
  
  <!-- Full width -->
  <div class="bismillah-col-span-3 bismillah-bg-green-500 bismillah-text-white bismillah-p-4">
    Full width item
  </div>
</div>

Grid Row Span

Make items span multiple rows:

<div class="bismillah-grid bismillah-grid-cols-3 bismillah-grid-rows-3 bismillah-gap-4 bismillah-h-96">
  <!-- Spans 2 rows -->
  <div class="bismillah-row-span-2 bismillah-bg-blue-500 bismillah-text-white bismillah-p-4">
    Tall item
  </div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Item</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Item</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Item</div>
</div>

Grid Auto Flow

Control how items are placed in the grid:

<!-- Fill row by row (default) -->
<div class="bismillah-grid bismillah-grid-cols-3 bismillah-auto-rows-max">
  <!-- Items fill rows first -->
</div>

Responsive Grid

Use responsive utilities for different screen sizes:

<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="bismillah-grid bismillah-grid-cols-1 md:bismillah-grid-cols-2 lg:bismillah-grid-cols-3 bismillah-gap-4">
  <div class="bismillah-bg-gray-100 bismillah-p-4">Card 1</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Card 2</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Card 3</div>
</div>

Common Patterns

<div class="bismillah-grid bismillah-grid-cols-1 md:bismillah-grid-cols-2 lg:bismillah-grid-cols-3 bismillah-gap-6">
  <div class="bismillah-bg-white bismillah-rounded-lg bismillah-shadow-md bismillah-p-6">
    <h3 class="bismillah-text-lg bismillah-font-bold bismillah-mb-2">Card 1</h3>
    <p class="bismillah-text-gray-600">Description</p>
  </div>
  <!-- Repeat for more cards -->
</div>

<div class="bismillah-grid bismillah-grid-cols-12 bismillah-gap-4">
  <!-- Sidebar -->
  <div class="bismillah-col-span-3 bismillah-bg-gray-800">
    Sidebar
  </div>
  
  <!-- Main content -->
  <div class="bismillah-col-span-9">
    <div class="bismillah-grid bismillah-grid-cols-2 bismillah-gap-4">
      <div class="bismillah-bg-white bismillah-p-4 bismillah-rounded">Widget 1</div>
      <div class="bismillah-bg-white bismillah-p-4 bismillah-rounded">Widget 2</div>
    </div>
  </div>
</div>

<div class="bismillah-grid bismillah-grid-cols-3 bismillah-gap-6 bismillah-mb-6">
  <!-- Hero spans 2 columns -->
  <div class="bismillah-col-span-2 bismillah-bg-blue-600 bismillah-text-white bismillah-p-8 bismillah-rounded-lg">
    <h1 class="bismillah-text-3xl bismillah-font-bold">Welcome</h1>
  </div>
  
  <!-- Sidebar -->
  <div class="bismillah-bg-gray-100 bismillah-p-4 bismillah-rounded-lg">
    Sidebar
  </div>
</div>

<div class="bismillah-grid bismillah-grid-cols-12 bismillah-gap-8">
  <!-- Article -->
  <article class="bismillah-col-span-8">
    <h1 class="bismillah-text-3xl bismillah-font-bold bismillah-mb-4">Article Title</h1>
    <p class="bismillah-text-gray-600">Content...</p>
  </article>
  
  <!-- Sidebar -->
  <aside class="bismillah-col-span-4 bismillah-bg-gray-50 bismillah-p-6 bismillah-rounded-lg">
    Related content
  </aside>
</div>

<!-- 2-column featured item + 2-column regular items -->
<div class="bismillah-grid bismillah-grid-cols-4 bismillah-gap-4">
  <div class="bismillah-col-span-2 bismillah-row-span-2 bismillah-bg-gradient-to-br bismillah-from-blue-500 bismillah-to-purple-600 bismillah-text-white bismillah-p-6 bismillah-rounded-lg">
    Featured
  </div>
  <div class="bismillah-bg-gray-100 bismillah-p-4 bismillah-rounded">Item 1</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4 bismillah-rounded">Item 2</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4 bismillah-rounded">Item 3</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4 bismillah-rounded">Item 4</div>
</div>

Quick Reference

Grid Tips

• Responsive first: Start with 1 column and increase for larger screens.
• Use gap: Gap is cleaner than adding margins to individual items.
• Combine with flexbox: Use flex inside grid items for finer control.
• Semantic columns: Use more columns (12) for finer control.
• Test layouts: Grid changes can be dramatic—test at all breakpoints.