Lism CSS
Search

WithSide (l--withSide)

l--withSide is a two-column class that, without relying on media queries or container queries, automatically switches between a horizontal and vertical layout based on the minimum width you want to preserve for the main content.

  • Specify the width of the side content with --sideW, and specify the width you want to preserve as much as possible for the main content with --mainW.
  • While the main content has enough space to maintain --mainW, the layout stays horizontal; once it drops below that threshold, it automatically switches to a vertical layout.

This is useful for layouts such as “image and content” or “main area and sidebar”.

CSS

/*
	Note: fxgの比率を 1:でかい数 にして、fix側を広がらないようにする。
      flex-grow は 変数指定だと挙動が変になることにも注意。
 */
.l--withSide {
  --sideW: auto;
  --mainW: max(20rem, 50%);
  display: flex;
  flex-wrap: wrap;

  > .is--side {
    flex-basis: var(--sideW);
    flex-grow: 1; /* 0 だと折り返されたときに広がらない */
    min-width: 0;
  }

  > :not(.is--side) {
    flex-grow: 9999999; /* できるだけ fix側を 指定値ピッタリに近づけるためにかなり大きな数値を指定 */
    flex-basis: min(100%, var(--mainW)); /* このサイズが折り返しポイントの基準となる */
    min-width: 0;
  }
}

One child element must have is--side.

div.l--withSide
  div
  div.is--side

Lism Component

Import

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

Props

PropertyOutputDescription
sideW --sideW Width of the side element
mainW --mainW Minimum width to maintain for the main element

Usage

A child element with is--side is required. The side element uses --sideW as its base width. When the main element’s width falls below --mainW, the layout automatically switches to a single column.

Usage example

↓
Usage example

Main Content

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content

Resize 
<WithSide sideW="12rem" mainW="20rem" g="20">
  <Box p="15" bd bdc="blue">
    <p>Main Content</p>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box isSide p="15" bd bdc="red">
    <p>Side Content</p>
  </Box>
</WithSide>

Reversed order

Using the -fxd:row-reverse class (flex-direction:row-reverse) together allows you to reverse only the horizontal order.

This places the side element on the left when horizontal, and at the bottom when stacked vertically.

↓
Example

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content
Resize 
<WithSide fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
  <Box>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box isSide>Side Content</Box>
</WithSide>

Layout with alternating media and text

l--withSide also works for layouts that show media and text side by side on wide screens and stacked on narrow screens.

This is especially useful when multiple “media + text” pairs are stacked, and you want the media position (left/right) to alternate when arranged horizontally, while keeping the media at the top consistently when stacked vertically.

↓
Example

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

Resize 
<Stack isContainer g="40">
  <WithSide sideW="40%" g="30" ai="center">
    <Frame ar="3/2" isSide max-h="50cqw">
      <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
    </Frame>
    <Box px="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Box>
  </WithSide>


  <WithSide fxd="row-reverse" sideW="40%" g="30" ai="center">
    <Frame ar="3/2" isSide max-h="50cqw">
      <img src="https://cdn.lism-css.com/img/a-2.jpg" alt="" width="960" height="640" />
    </Frame>
    <Box px="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Box>
  </WithSide>
</Stack>

Building a similar layout with Grid

WithSide (l--withSide) is not dependent on breakpoints, but you can also build a similar layout using Grid where the switch point is controlled by a breakpoint.

↓
Building a WithSide-like layout using Grid

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content
Resize 
<Grid gta={[`'.' 'side'`, `'. side'`]} gtc={[null, '1fr 10rem']} g="20">
  <Box>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box ga="side">Side Content</Box>
</Grid>
↓
Example: side on the left, switching at @md

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content
Resize 
<Grid gta={[`'.' 'side'`, null, `'side .'`]} gtc={[null, null, '10rem 1fr']} g="20">
  <Box>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box ga="side">Side Content</Box>
</Grid>

© Lism CSS. All rights reserved.

TOC