Estructura & Layout layoutgridgallery
4-Column Portfolio Grid
Galería de cuatro columnas responsiva para portfolios fotográficos y proyectos.
Vista Previa en Vivo
4-Column Portfolio Grid
Uso
Copia y pega este código directamente en tu página de Astro:
astro
---
import { 4-ColumnPortfolioGrid } from 'astro-component-kit';
---
<GalleryGrid4>Content</GalleryGrid4>Instalación Manual
Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/4-ColumnPortfolioGrid.astro:
astro
---
/**
* GalleryGrid4 — 4-Column aspect ratio grid for visual galleries and photos.
*/
interface Props {
className?: string;
}
const { className = '' } = Astro.props;
---
<div class={`gal-grid ${className}`}>
<slot>
<div class="gal-item"><span>Photo 1</span></div>
<div class="gal-item"><span>Photo 2</span></div>
<div class="gal-item"><span>Photo 3</span></div>
<div class="gal-item"><span>Photo 4</span></div>
</slot>
</div>
<style>
.gal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
width: 100%;
}
.gal-grid :global(> *), .gal-item {
aspect-ratio: 1;
border-radius: 12px;
background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
font-weight: 600;
}
</style>Información Rápida
- Categoría
- Estructura & Layout
- Nombre de archivo
4-ColumnPortfolioGrid.astro- Dependencias
- Ninguna — Astro nativo + CSS puro
- Etiquetas
- layoutgridgallery