Layout component is deprecated, use Split component instead. Split component has the same features as Layout and more.

Grains are seeded randomly, periodically, or whenever the module receives a trigger.
The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.
Grains are seeded randomly, periodically, or whenever the module receives a trigger.

Usage

import { Layout } from '@loomhq/lens'
<Layout>
  <Layout.Section>Content</Layout.Section>
  <Layout.Section>Content</Layout.Section>
  <Layout.Section>Content</Layout.Section>
</Layout>

Alignment

Use alignment prop to align children in relation to each other.

Gap and dimensions

Use gap prop on <Layout /> to create space between Layout.Sections. Use width and maxWidth props on <Layout.Section /> to specify dimensions.

See also Responsive props

Semantic spacing value

nameunitrempx
xsmall0.50.25rem4px
small10.5rem8px
medium21rem16px
large31.5rem24px
xlarge52.5rem40px
xxlarge84rem64px
<Layout gap="medium">
  <Layout.Section width="xlarge">Content</Layout.Section>
  <Layout.Section>Content</Layout.Section>
</Layout>

Number value

The number value will be mutiplied by 8. For example, if we pass 3 it will result in 24px(3*8). The result is converted to REMs, so the final value is 1.5rem (24/16).

<Layout gap={4}>
  <Layout.Section width={20}>Content</Layout.Section>
  <Layout.Section>Content</Layout.Section>
</Layout>

String value

Any valid CSS measurement value, for example, auto, 50%, or 10vw.

<Layout gap="1px">
  <Layout.Section width="50%">Content</Layout.Section>
  <Layout.Section>Content</Layout.Section>
</Layout>

Props

Layout

name
type
default
alignment
ResponsiveType
<'start' | 'center' | 'end' | 'stretch'>
gap
ResponsiveType
<string | number>
children
React.ReactNode

Layout.Section

name
type
default
width
ResponsiveType
<string | number>
maxWidth
ResponsiveType
<string | number>
children
React.ReactNode