Макеты и Сетки layoutgridgallery
4-Column Portfolio Grid
Четырехколоночная адаптивная галерея для фотографий и проектов портфолио.
Живое превью
4-Column Portfolio Grid
Использование
Скопируйте и вставьте этот код на вашу страницу Astro:
astro
---
import { 4-ColumnPortfolioGrid } from 'astro-component-kit';
---
<GalleryGrid4>Content</GalleryGrid4>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>Краткая информация
- Категория
- Макеты и Сетки
- Имя файла
4-ColumnPortfolioGrid.astro- Зависимости
- Нет — чистый Astro + CSS
- Теги
- layoutgridgallery