Container (is--container)

is--container は、container-type を宣言してコンテナクエリを有効にするためのクラスです。

CSS

// コンテナ定義 + 併用クラスで内部のコンテンツ幅を制御する。
.is--container {
  container-type: inline-size;
}

// 最外側の is--container 直下の子要素にだけ --sz--bleed を 100cqi で上書きする。
//   Memo: .is--container:not(:where(.is--container .is--container)) を使ってもいいがわかりにくいので、以下のようにしている
.is--container > * {
  --sz--bleed: 100cqi;
}
.is--container.has--gutter > * {
  // has--gutterがある場合はその分を加算
  --sz--bleed: calc(100cqi + var(--gutter-size) * 2);
}
.is--container .is--container > * {
  // --sz--bleed は一番先祖(最外側) の is--container で値をセットしたらあとは引き継ぐだけ
  --sz--bleed: inherit;
}

Lismコンポーネントでの使い方

isContainer プロパティでどのコンポーネントからでも呼び出せるようになっています。

プロパティ	出力
`isContainer`	`is--container`

さらに、<Lism isContainer> のエイリアスとして、<Container> も用意しています。

Import

import { Container } from 'lism-css/react';

Usage

使用例

↓

例

このBOXは、paddingが切り替わります。

リサイズ

<Container isWrapper="s" p="20">
  <Box bd p={['10', '30']}>
    このBOXは、paddingが切り替わります。
  </Box>
</Container>