Lism CSS
Search

SideMain (l--sideMain)

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

  • 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.
  • As long as the main content can preserve --mainW, the horizontal arrangement is kept; if it falls below that, it automatically switches to a vertical arrangement.

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

CSS

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

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

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

One child element must have .is--side.

div.l--sideMain
  div
  div.is--side

Lism Component

Import

import { SideMain } 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’s width is fixed to the value set by --sideW. 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

リサイズ可能 
<SideMain 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>
</SideMain>

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
リサイズ可能 
<SideMain 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>
</SideMain>

Building a similar layout with Grid

SideMain (.l--sideMain) 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 SideMain-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
リサイズ可能 
<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
リサイズ可能 
<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