2カラムレイアウト

Lismで2カラムページの全体レイアウトを組む場合の例を紹介します。

↓

コード

<body>
  <Stack id='wrap' minH='100vh'>
    <_Header_ />
    <Container hasGutter size='m' py='50' flexItem={{ fx: '1' }}>
      <WithSide sideW='240px' mainMinW='40em' g='50'>
        <main class="is--container">
          <_Contents_ />
        </main>
        <aside class='is--side is--container is--flow'>
          <div>Sidebar contents...</div>
        </aside>
      </WithSide>
    </Container>
    <_Footer_ />
  </Stack>
</body>

↓

プレビュー

大きい画面で見る