Grid System

This guide explains the grid system in LamaPress, including how to use the ll-grid class and grid column utilities.

Table of Contents

• Overview
• Grid Configuration
  • Desktop Grid
  • Mobile Grid
  • Breakpoint
• Using the Grid
  • Basic Grid
  • Column Spans
  • Column Start/End
• Grid Utilities
  • Width Utilities
  • Spacing Utilities
• CSS Variables
• Best Practices
  • 1. Use ll-grid Class
  • 2. Responsive Columns
  • 3. Grid Gaps
• Related Documentation

---

Overview

LamaPress uses a custom grid system with 12 columns on desktop and 6 columns on mobile. The grid is implemented via the ll-grid class and provides column utilities for flexible layouts.

Grid Configuration

Grid settings are in tailwind/config/grid.js:

export const grid = {
  breakpoint: 800,
  desktop: {
    margin: 40,
    gutter: 20,
    columns: 12,
  },
  mobile: {
    margin: 24,
    gutter: 12,
    columns: 6,
  },
}

Desktop Grid

• Columns: 12
• Gutter: 20px (spacing between columns)
• Margin: 40px (side margins)

Mobile Grid

• Columns: 6
• Gutter: 12px
• Margin: 24px

Breakpoint

Grid switches from mobile to desktop at 800px.

Using the Grid

Basic Grid

Apply ll-grid class to create a grid container:

<div class="ll-grid">
  <div class="col-span-6">Half width</div>
  <div class="col-span-6">Half width</div>
</div>

Note: Always use ll-grid as the container class, not Tailwind's grid.

Column Spans

Use col-span-{n} to span columns:

<div class="ll-grid">
  <div class="col-span-12">Full width</div>
  <div class="col-span-6">Half width</div>
  <div class="col-span-4">One third</div>
  <div class="col-span-3">One quarter</div>
</div>

Desktop (12 columns):

• col-span-12 = 100% width
• col-span-6 = 50% width
• col-span-4 = 33.33% width
• col-span-3 = 25% width

Mobile (6 columns):

• col-span-6 = 100% width
• col-span-3 = 50% width
• col-span-2 = 33.33% width

Column Start/End

Use col-start-{n} and col-end-{n} for precise positioning:

<div class="ll-grid">
  <div class="col-start-1 col-end-7">First half</div>
  <div class="col-start-7 col-end-13">Second half</div>
</div>

Grid Utilities

Width Utilities

Grid-based width utilities:

<div class="w-ll-1/2">Half width (grid-based)</div>
<div class="w-ll-1/4">Quarter width (grid-based)</div>
<div class="w-ll-3/4">Three quarters (grid-based)</div>

These utilities calculate width based on grid columns and gaps.

Spacing Utilities

Grid-based spacing utilities:

<div class="mb-ll-1/12">Margin bottom (1 column)</div>
<div class="p-ll-2/12">Padding (2 columns)</div>

See Spacing System for details.

CSS Variables

Grid exposes CSS custom properties:

--ll-col-count: 12;        /* Column count */
--ll-grid-gap: 1.25rem;     /* Gutter size */
--ll-grid-column: ...;      /* Column width calculation */
--ll-grid-margin: 2.5rem;   /* Side margin */

Use in custom CSS:

.custom-element {
  width: calc(var(--ll-grid-column) * 6 + 5 * var(--ll-grid-gap));
}

Best Practices

1. Use ll-grid Class

Always use ll-grid for grid containers:

<!-- Good -->
<div class="ll-grid">
  <div class="col-span-6">Content</div>
</div>

<!-- Avoid -->
<div class="grid grid-cols-12">
  <div class="col-span-6">Content</div>
</div>

2. Responsive Columns

Plan for both mobile (6) and desktop (12) columns:

<div class="ll-grid">
  <!-- Mobile: 6 cols, Desktop: 12 cols -->
  <div class="col-span-6 md:col-span-4">Content</div>
  <div class="col-span-6 md:col-span-4">Content</div>
  <div class="col-span-6 md:col-span-4">Content</div>
</div>

3. Grid Gaps

Grid gaps are automatically applied. Don't add manual gaps:

<!-- Good - gaps are automatic -->
<div class="ll-grid">
  <div class="col-span-6">Content</div>
</div>

<!-- Avoid - don't add manual gaps -->
<div class="ll-grid gap-4">
  <div class="col-span-6">Content</div>
</div>

Related Documentation

• Styling Overview - Styling approach
• Spacing System - Spacing utilities
• Responsive Design - Responsive patterns

---

Next Steps:

• Review Spacing System for spacing utilities
• Check Responsive Design for responsive patterns
• See existing components for grid usage examples