Container (is--container)

is--container is a class that declares container-type to enable container queries.

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);
}

Using with Lism Components

It can be applied via the isContainer property on any component.

Property	Output
`isContainer`	`.is--container`

A dedicated <Container> component is also available as an alias for <Lism isContainer>.

Import

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

Usage

Example

↓

Example

This Box switches its padding based on the container size.

リサイズ可能

<Container isWrapper="s" p="20">
  <Box bd p={['10', '30']}>
    This Box switches its padding based on the container size.
  </Box>
</Container>