Lism CSS
検索

Section

Section008

セクション用のテンプレートです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。

大きい画面で見る
↓
コード
index.astro 
---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Frame, Grid, Media, Stack, HTML } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Section008">
	<Container bgc="base" py="50">
		<Stack g={['40', null, '50']}>
			<Stack ai="center" g="30" ff="accent" setGutter>
				<HTML.h lv="2" fz="clamp(1.5rem, 4.5vw, 2rem)" fw="bold" ta="center">大地の恵みを、あなたの毎日へ</HTML.h>
				<HTML.p>自然由来の環境負荷を抑えた製法で、一つひとつ丁寧に手作りしています。</HTML.p>
			</Stack>
			<Grid gt="repeat" cols={['2', null, '4']} rows={['12', null, '6']} g={['30', '40']}>
				<Frame as="figure" gr={['1 / span 5', null, '1 / span 5']} gc={['1', null, '1']}>
					<Media src="https://cdn.lism-css.com/img/random-2510?r=1" width="960" height="640" />
				</Frame>
				<Frame as="figure" gr={['2 / span 5', null, '2 / span 5']} gc={['2', null, '2']}>
					<Media src="https://cdn.lism-css.com/img/random-2510?r=2" width="960" height="640" />
				</Frame>
				<Frame as="figure" gr={['6 / span 5', null, '1 / span 5']} gc={['1', null, '3']}>
					<Media src="https://cdn.lism-css.com/img/random-2510?r=3" width="960" height="640" />
				</Frame>
				<Frame as="figure" gr={['7 / span 5', null, '2 / span 5']} gc={['2', null, '4']}>
					<Media src="https://cdn.lism-css.com/img/random-2510?r=4" width="960" height="640" />
				</Frame>
			</Grid>
		</Stack>
	</Container>
</DemoLayout>
style.css