Layout layoutgridgallery
4-Column Portfolio Grid
Square aspect-ratio grid for visual galleries and photos.
Preview
Component preview not available for: gallery-grid-4
Ensure the filename matches GalleryGrid4.astro
Usage
Copy the full block below to use this component with its imports.
astro
---
import { 4-ColumnPortfolioGrid } from 'astro-component-kit';
---
<GalleryGrid4>Content</GalleryGrid4>Manual Installation
If you are not using the npm package, create a new file src/components/lib/4-ColumnPortfolioGrid.astro and paste the following code:
astro
---
---
<div class="gal-grid"><slot /></div>
<style>
.gal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.gal-grid :global(> *) { aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, 0.05); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
</style>Quick Info
- Category
- Layout
- Filename
4-ColumnPortfolioGrid.astro- Dependencies
- None — pure Astro + CSS
- Tags
- layoutgridgallery