Lism CSS
検索

Section

Section008

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

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

import { Container, Frame, TileGrid, Media, Stack, Text, Heading } 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" hasGutter>
        <Heading level="2" fz="clamp(1.5rem, 4.5vw, 2rem)" fw="bold" ta="center">大地の恵みを、あなたの毎日へ</Heading>
        <Text>自然由来の環境負荷を抑えた製法で、一つひとつ丁寧に手作りしています。</Text>
      </Stack>
      <TileGrid 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/random/img?r=1" alt="" 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/random/img?r=2" alt="" 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/random/img?r=3" alt="" 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/random/img?r=4" alt="" width="960" height="640" />
        </Frame>
      </TileGrid>
    </Stack>
  </Container>
</DemoLayout>
style.css