コンテンツにスキップ
Lism CSS

WithSide

メディアクエリ・コンテナクエリに依存せず、維持したいコンテンツの長さを基準にして横並びと縦並びの切り替えを行うことができる2カラムレイアウトを作成します。

メインコンテンツとそのサイドコンテンツ、のようなレイアウトに活用できます。

基本構造

Section titled “基本構造”
div.l--withSide
  div
  div.is--side

CSS

Section titled “CSS”

Import

Section titled “Import”
import { WithSide } from 'lism-css/react';

Props

Section titled “Props”
プロパティ出力説明
sideW--sideWside要素の横幅
mainW--mainWmain要素で維持したい最小幅

Usage

Section titled “Usage”

子要素に.is--sideが必要です。
.is--sideの横幅を--sideWで指定した値に固定しつつ、もう一方が--mainWで指定した横幅を下回るようになると、自動で1カラムに切り替わるようになっています。

↓
使用例

Main Content

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Side Content

リサイズ可能 
<WithSide sideW='12rem' mainW='20rem' g='30'>
  <Box p='20' bd bdc='blue'>
    <p>Main Content</p>
    <Dummy />
  </Box>
  <Box isSide p='20' bd bdc='red'>
    <p>Side Content</p>
  </Box>
</WithSide>

反転

Section titled “反転”

-fxd:row-rクラス（flex-direction:row-reverse）を併用することで、横並びの時の順番だけを反転させることができます。

これにより、横並びの時は左側、縦並びの時は下側にside要素を配置できます。

↓
例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Side Content

リサイズ可能 
<WithSide fxd='row-r' sideW='10rem' mainW='16rem' g='30'>
  <Box>
    <Dummy />
  </Box>
  <Box isSide>Side Content</Box>
</WithSide>

Gridを使って似たレイアウトを構成する例

Section titled “Gridを使って似たレイアウトを構成する例”

WithSide(.l--withSide)はブレイクポイントに依存しませんが、Gridで構成することで、レイアウトの切り替えポイントをブレイクポイントで指定して同じようなレイアウトを構築することもできます。

↓
Gridを使ってWithSideのようなレイアウトを構築する例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Side Content

リサイズ可能 
<Grid gta={[`'.' 'side'`, `'. side'`]} gtc={[null, '1fr 10rem']} g='30'>
  <Box>
    <Dummy />
  </Box>
  <Box ga='side'>Side Content</Box>
</Grid>
↓
sideを左側、ブレイクポイントを@mdにする例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Side Content

リサイズ可能 
<Grid gta={[`'.' 'side'`, null, `'side .'`]} gtc={[null, null, '10rem 1fr']} g='30'>
  <Box>
    <Dummy />
  </Box>
  <Box ga='side'>Side Content</Box>
</Grid>