Responsive Design Patterns

# Responsive Design Patterns for Google Antigravity

Create beautiful, mobile-first responsive interfaces using modern CSS with Google Antigravity IDE.

## Container Queries

```css
/* Modern container queries for component-based responsiveness */
.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

/* Respond to container size, not viewport */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr auto;
  }
}
```

## Fluid Typography

```css
/* Fluid type scale with clamp() */
:root {
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --font-size-3xl: clamp(2.5rem, 2rem + 3vw, 4rem);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
p { font-size: var(--font-size-base); }
```

## CSS Grid Responsive Layouts

```css
/* Auto-fit grid for responsive cards */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

/* Named grid areas for layout changes */
.dashboard {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
  gap: 1rem;
}

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      "header header"
      "nav main"
      "nav aside"
      "footer footer";
  }
}

@media (min-width: 1024px) {
  .dashboard {
    grid-template-columns: 250px 1fr 300px;
    grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer";
  }
}
```

## Tailwind Responsive Utilities

```tsx
// components/ResponsiveCard.tsx
export function ResponsiveCard({ title, description, image }: CardProps) {
  return (
    <div className="
      flex flex-col
      sm:flex-row
      lg:flex-col
      xl:flex-row
      gap-4 p-4 rounded-lg border
    ">
      <img
        src={image}
        alt={title}
        className="
          w-full h-48 object-cover rounded
          sm:w-48 sm:h-auto
          lg:w-full lg:h-48
          xl:w-48 xl:h-auto
        "
      />
      <div className="flex-1">
        <h3 className="
          text-lg font-semibold
          md:text-xl
          lg:text-2xl
        ">
          {title}
        </h3>
        <p className="
          text-sm text-gray-600
          md:text-base
          line-clamp-2
          sm:line-clamp-3
        ">
          {description}
        </p>
      </div>
    </div>
  );
}
```

## Best Practices

1. **Design mobile-first** then enhance for larger screens
2. **Use container queries** for component-level responsiveness
3. **Apply fluid typography** with clamp()
4. **Leverage CSS Grid** for complex layouts
5. **Test on real devices** not just browser resize
6. **Consider touch targets** for mobile users
7. **Optimize images** for different screen sizes

Google Antigravity provides intelligent responsive design suggestions and CSS generation.