SideMain

Creates a two-column layout that switches between horizontal and vertical arrangements based on the desired content width, without relying on media queries or container queries.

This is useful for layouts such as a main content area with a side panel.

Structure

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

CSS

Import

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

Props

Property	Output	Description
`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

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>
    <Dummy />
  </Box>
  <Box isSide p='15' bd bdc='red'>
    <p>Side Content</p>
  </Box>
</SideMain>

<div class='l--sideMain -g:20' style='--sideW:12rem;--mainW:20rem'>
  <div class='l--box -p:15 -bd' style='--bdc:var(--blue)'>
    <p>Main Content</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.</p>
  </div>
  <div class='l--box is--side -p:15 -bd' style='--bdc:var(--red)'>
    <p>Side Content</p>
  </div>
</div>

Reversed order

Using the -fxd:row-r 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

Side Content

リサイズ可能

<SideMain fxd='row-r' sideW='10rem' mainW='16rem' g='20'>
  <Box>
    <Dummy />
  </Box>
  <Box isSide>Side Content</Box>
</SideMain>

<div class='l--sideMain -fxd:row-r -g:20' style='--sideW:10rem;--mainW:16rem;'>
  <div class='l--box'>
    <p>Lorem ipsum dolor sit amet, ...</p>
  </div>
  <div class='l--box is--side'>
    Side Content
  </div>
</div>

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

Side Content

リサイズ可能

<Grid gta={[`'.' 'side'`, `'. side'`]} gtc={[null, '1fr 10rem']} g='20'>
  <Box>
    <Dummy />
  </Box>
  <Box ga='side'>Side Content</Box>
</Grid>

<div class="l--grid -gta -gta_sm -gtc_sm -g:20" style="--gta:'.' 'side';--gta_sm:'. side';--gtc_sm:1fr 10rem">
  <div class='l--box'>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor.
      Non facere laudantium ex eos doloribus aut dolore nisi.
    </p>
  </div>
  <div class='l--box -ga' style='--ga:side'>
    Side Content
  </div>
</div>

↓

Example: side on the left, switching at @md

Side Content

リサイズ可能

<Grid gta={[`'.' 'side'`, null, `'side .'`]} gtc={[null, null, '10rem 1fr']} g='20'>
  <Box>
    <Dummy />
  </Box>
  <Box ga='side'>Side Content</Box>
</Grid>

<div class="l--grid -gta -gta_md -gtc_md -g:20" style="--gta:'.' 'side';--gta_md:'side .';--gtc_md:10rem 1fr">
  <div class='l--box'>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor.
      Non facere laudantium ex eos doloribus aut dolore nisi.
    </p>
  </div>
  <div class='l--box -ga' style='--ga:side'>
    Side Content
  </div>
</div>

SideMain

Structure

CSS

Import

Props

Usage

Reversed order

Building a similar layout with Grid

Building a similar layout with `Grid`