1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Макеты и Сетки layoutgridcards

Glass Card Grid

Адаптивная сетка карточек с матовым размытием и светящимися рамками.

Glass Card Grid

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { GlassCardGrid } from 'astro-component-kit';
---

<GlassCardGrid>Content</GlassCardGrid>
--- import { GlassCardGrid } from 'astro-component-kit'; --- <GlassCardGrid>Content</GlassCardGrid>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/GlassCardGrid.astro:

astro 
---
/**
 * GlassCardGrid — A responsive grid specifically designed for card layouts with auto-fill columns.
 * 
 * @param {string} minWidth - Minimum width of columns (default: '300px').
 * @param {string} gap - Gap between items (default: '2rem').
 */
interface Props {
  minWidth?: string;
  gap?: string;
  className?: string;
}

const { minWidth = '300px', gap = '2rem', className = '' } = Astro.props;
---

<div class={`card-grid ${className}`} style={`--min-width: ${minWidth}; --gap: ${gap};`}>
  <slot />
</div>

<style>
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-width, 300px), 1fr));
    gap: var(--gap, 2rem);
    width: 100%;
  }
</style>
--- /** * GlassCardGrid — A responsive grid specifically designed for card layouts with auto-fill columns. * * @param {string} minWidth - Minimum width of columns (default: '300px'). * @param {string} gap - Gap between items (default: '2rem'). */ interface Props { minWidth?: string; gap?: string; className?: string; } const { minWidth = '300px', gap = '2rem', className = '' } = Astro.props; --- <div class={`card-grid ${className}`} style={`--min-width: ${minWidth}; --gap: ${gap};`}> <slot /> </div> <style> .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min-width, 300px), 1fr)); gap: var(--gap, 2rem); width: 100%; } </style>

Краткая информация

Категория
Макеты и Сетки
Имя файла
GlassCardGrid.astro
Зависимости
Нет — чистый Astro + CSS
Теги
layoutgridcards