Container (is--container)

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

CSS

// コンテナ定義 + 併用クラスで内部のコンテンツ幅を制御する。
.is--container {
  container-type: inline-size;
  // container-name: lismContainer;
}
.is--container > * {
  --sz--container: 100cqi;
}
// set--gutterがある場合はその分を加算
.is--container.set--gutter > * {
  --sz--container: calc(100cqi + var(--gutter-size) * 2);
}

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>