Member
Member003
メンバー一覧用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Grid, Media, Stack, HTML } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title='Member003'>
<Container isWrapper='l' bgc='base' py='50' hasGutter>
<Stack g='50'>
<HTML.h lv='2' class='u-trim' fz='4xl' fw='medium' ff='accent' lts='l' ta='center'>Member</HTML.h>
<Grid gtc='repeat(auto-fit, minmax(10rem, 1fr))' g='40'>
<Stack g='30'>
<Frame tag='figure' ar='1/1' w='stretch' bdrs='10'>
<Media src='https://cdn.lism-css.com/img/random-2510?category=portrait-v&r=1' width='960' height='640' />
</Frame>
<Stack g='20'>
<HTML.p class='u-trim' fz='m' fw='bold'>鈴木 太郎</HTML.p>
<HTML.p class='u-trim' fz='xs' o='-10'>代表取締役 / クリエイティブディレクター</HTML.p>
</Stack>
</Stack>
<Stack g='30'>
<Frame tag='figure' ar='1/1' w='stretch' bdrs='10'>
<Media src='https://cdn.lism-css.com/img/random-2510?category=portrait-v&r=2' width='960' height='640' />
</Frame>
<Stack g='20'>
<HTML.p class='u-trim' fz='m' fw='bold'>佐藤 美咲</HTML.p>
<HTML.p class='u-trim' fz='xs' o='-10'>アートディレクター / UI/UXデザイナー</HTML.p>
</Stack>
</Stack>
<Stack g='30'>
<Frame tag='figure' ar='1/1' w='stretch' bdrs='10'>
<Media src='https://cdn.lism-css.com/img/random-2510?category=portrait-v&r=3' width='960' height='640' />
</Frame>
<Stack g='20'>
<HTML.p class='u-trim' fz='m' fw='bold'>高橋 健太</HTML.p>
<HTML.p class='u-trim' fz='xs' o='-10'>テクニカルディレクター / リードエンジニア</HTML.p>
</Stack>
</Stack>
<Stack g='30'>
<Frame tag='figure' ar='1/1' w='stretch' bdrs='10'>
<Media src='https://cdn.lism-css.com/img/random-2510?category=portrait-v&r=4' width='960' height='640' />
</Frame>
<Stack g='20'>
<HTML.p class='u-trim' fz='m' fw='bold'>田中 雄大</HTML.p>
<HTML.p class='u-trim' fz='xs' o='-10'>Webディレクター / プロジェクトマネージャー</HTML.p>
</Stack>
</Stack>
</Grid>
</Stack>
</Container>
</DemoLayout> style.css