Responsive Grid Patterns

The key patterns that make our pages responsive and beautiful across all devices.

Pattern 1: Auto-Fill Grid (Fixed Minimum Width)

Best for cards/boxes with fixed minimum size.

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;">
  <!-- Items go here -->
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Behavior:

• Items have minimum width of 200px
• Grid creates as many columns as will fit
• Remaining space distributed equally (1fr)
• Gaps between items are 1rem

Use Cases:

• Category cards (Internship fields)
• Feature lists
• Team members

---

Pattern 2: Auto-Fit Grid (Stretch to Fill)

Best when you want items to stretch and fill available space.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0;">
  <!-- Items go here -->
</div>

Difference from auto-fill:

• auto-fit collapses empty tracks
• auto-fill keeps empty tracks
• Use auto-fit when you want fewer, wider items
• Use auto-fill when you want more, narrower items

Use Cases:

• Contact button grid (4 buttons)
• Feature highlights (Tourist Offer boxes)
• Image galleries

---

Pattern 3: Responsive 2-Column Grid

Specific two-column layout that collapses on mobile.

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
  <div>Left column</div>
  <div>Right column</div>
</div>

Behavior:

• Always 2 columns on desktop
• Collapses to 1 column on very small screens (handled by browser)

Use Cases:

• EU/Non-EU guide links
• Side-by-side comparisons

---

Pattern 4: Homepage Hero Grid

Complex grid for visual content areas.

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;">
  <div className="vision-text">
    {/* Text content */}
  </div>
  <div className="vision-image">
    {/* Image */}
  </div>
</div>

Key Features:

• Equal columns (1fr 1fr)
• Larger gap (2rem)
• Vertically centered items (align-items: center)

Use Cases:

• Hero sections
• Feature showcases
• Content + image layouts

---

Breakpoint Considerations

Our grids are intrinsically responsive - they adapt based on available space, not fixed breakpoints.

Mobile (< 600px):

• minmax(200px, 1fr) → Single column
• Gap reduces naturally

Tablet (600px - 1000px):

• minmax(200px, 1fr) → 2-3 columns
• Full gaps maintained

Desktop (> 1000px):

• minmax(200px, 1fr) → 3-5 columns
• Optimal spacing

---

Common Patterns by Use Case

Contact Buttons (4 items)

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;

Feature Boxes (3-4 items)

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;

Category Cards (8-12 items)

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;

Two-Column Layout

grid-template-columns: 1fr 1fr;
gap: 2rem;

---

❌ What NOT to Do

/* BAD: Fixed pixel widths */
grid-template-columns: 300px 300px 300px;
 
/* BAD: Media queries for every breakpoint */
@media (max-width: 768px) {
  grid-template-columns: 1fr;
}
 
/* BAD: Hardcoded column counts */
grid-template-columns: repeat(3, 1fr);
 
/* BAD: Tiny gaps that make content cramped */
gap: 0.25rem;

✅ Best Practices

1. Use auto-fill or auto-fit instead of fixed column counts
2. Use minmax() to set flexible boundaries
3. Use fr units for fluid sizing
4. Use adequate gaps (minimum 1rem)
5. Add margin to grid containers (2rem top/bottom)
6. Test on mobile - grids should collapse gracefully

---

Complete Example (Internship Fields)

<section style="margin: 3rem 0;">
  <h2>Fields at ColivingLiguria</h2>
  <p style="margin-bottom: 1.5rem;">Choose your area of interest:</p>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;">
    
    <a href="/link1" style="text-decoration: none; color: inherit; padding: 1.2rem; background: var(--lightgray); border-left: 4px solid var(--secondary); border-radius: 8px;">
      <h4 style="margin: 0 0 0.5rem 0;">Category 1</h4>
      <p style="font-size: 0.9rem; margin: 0; color: var(--gray);">Description</p>
    </a>
    
    <a href="/link2" style="text-decoration: none; color: inherit; padding: 1.2rem; background: var(--lightgray); border-left: 4px solid var(--tertiary); border-radius: 8px;">
      <h4 style="margin: 0 0 0.5rem 0;">Category 2</h4>
      <p style="font-size: 0.9rem; margin: 0; color: var(--gray);">Description</p>
    </a>
    
    <!-- More items... -->
    
  </div>
</section>

This pattern:

• ✅ Responsive (no media queries needed)
• ✅ Uses CSS variables
• ✅ Accessible (semantic HTML)
• ✅ Consistent spacing
• ✅ Works in light & dark modes