Layout layoutgridcards

Glass Card Grid

A responsive grid specifically designed for card layouts with auto-fill columns.

Component preview not available for: glass-card-grid

Ensure the filename matches GlassCardGrid.astro

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassCardGrid.astro and paste the following code:

astro 
---
---
<div class="card-grid"><slot /></div>
<style>
  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
</style>
--- --- <div class="card-grid"><slot /></div> <style> .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } </style>

Quick Info

Category
Layout
Filename
GlassCardGrid.astro
Dependencies
None — pure Astro + CSS
Tags
layoutgridcards