90 lines
1.9 KiB
Markdown
90 lines
1.9 KiB
Markdown
---
|
|
name: layout/card-grid
|
|
title: Card Grid with Hover States
|
|
description: Responsive card grids with hover animations and shadows.
|
|
tags: [layout, grid, card, hover, responsive]
|
|
source: raycast.com, linear.app, resend.com, stripe.com
|
|
---
|
|
|
|
# Card Grid Layout
|
|
|
|
## CSS Grid
|
|
|
|
```css
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
```
|
|
|
|
## Card Structure
|
|
|
|
```html
|
|
<article class="card">
|
|
<div class="card-icon">📊</div>
|
|
<h3 class="card-title">Заголовок</h3>
|
|
<p class="card-description">Описание фичи...</p>
|
|
<a href="#" class="card-link">Подробнее →</a>
|
|
</article>
|
|
```
|
|
|
|
```css
|
|
.card {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 20px;
|
|
padding: 32px;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.card:hover {
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.card-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: rgba(99, 102, 241, 0.1);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
.card-description {
|
|
color: var(--color-text-secondary);
|
|
flex: 1;
|
|
margin-bottom: 16px;
|
|
}
|
|
.card-link {
|
|
color: var(--color-accent);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transition: gap 0.3s ease;
|
|
}
|
|
.card-link:hover {
|
|
gap: 8px;
|
|
}
|
|
```
|
|
|
|
## Anti-patterns
|
|
|
|
| ❌ Плохо | ✅ Хорошо |
|
|
|----------|-----------|
|
|
| `min-width: 200px` | `min-width: 300px` |
|
|
| Без `auto-fit` | `grid-template-columns: repeat(auto-fit, ...)` |
|
|
| Без hover | `transform: translateY(-4px)` |
|
|
| Без `flex: 1` | `flex: 1` для описания |
|