Layout layoutgridgallery

4-Column Portfolio Grid

Square aspect-ratio grid for visual galleries and photos.

Usage

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

---
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:

---
---
<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

Preview

Usage

Manual Installation

Quick Info