Wrapper (is--wrapper)

is--wrapper is a class that collectively controls the width of its direct child content.

CSS

.is--wrapper {
  // 子要素の制御
  --contentSize: var(--sz--m, 100%);
  > * {
    inline-size: 100%; // l--stack 等の縦並び配下で自然幅要素のガタつきを防ぐ
    max-inline-size: min(100%, var(--contentSize)); // min ないとimg要素等がはみ出す
    margin-inline: auto;
  }
}

// Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方がネスト時の影響をなくせるが、wrapper のネストが多様されることは少ないので親側の変数管理のみで実装。
.-contentSize\:s {
  --contentSize: var(--sz--s);
}

.-contentSize\:l {
  --contentSize: var(--sz--l);
}

Direct children receive inline-size: 100%, so even elements whose natural width is below --contentSize (short paragraphs, <table>, etc.) always stretch to the parent width. This keeps widths consistent under l--stack and other vertical layouts and prevents jagged edges.

Using with Lism Components

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

A dedicated <Wrapper> component is also available as an alias for <Lism isWrapper>.

Import

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

import { Wrapper } from 'lism-css/astro';

Props

// ①
<Flow isWrapper="s" isContainer>...</Flow>

// ②
<Wrapper contentSize="s" layout="flow" isContainer>...</Wrapper>

Usage

Example

<Wrapper layout="flow" p="20">
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</Wrapper>

<div class="l--flow is--wrapper -p:20">
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</div>

<Wrapper contentSize="s" layout="flow" p="20">
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</Wrapper>

<div class="l--flow is--wrapper -contentSize:s -p:20">
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</div>

Setting a custom container size

To use a value other than s or l, pass any value to isWrapper and it will be output as the --contentSize CSS variable.

<Lism isWrapper="20rem" p="20">
  <div>Contents...</div>
  <div>Contents...</div>
</Lism>

<div class="is--wrapper -p:20" style="--contentSize: 20rem">
  <div>Contents...</div>
  <div>Contents...</div>
</div>

Demo Page