How to compose layouts with Lens

By layout, we refer to the arrangement and spacing of UI elements. A layout can be as simple as buttons arranged in a row or as complex as page divisions.

Understanding CSS Flexbox and Grid properties

Lens layout tools are built with CSS flexbox and grid properties. Understanding these properties is helpful when building with Lens.

• Learn more about Flexbox A Complete Guide to Flexbox
• Learn more about Grid A Complete Guide to Grid

Compose with Lens layout components

See layout components

See layout recipes

Layout components are designed to cover most of the common layout cases and reduce repeated custom CSS.

<Container maxWidth={44} borderSide="all" padding="medium" radius="medium" shadow="small">
  <Arrange gap="medium" columns={['auto', '1fr', 'auto']}>
    <Avatar letter="T"/>
    <Text hasEllipsis>{demoText.long}</Text>
    <Arrange gap="small">
      <Arrange gap="xsmall">
        <Icon color="bodyDimmed" icon={<SvgSmile />}/>
        <Text color="bodyDimmed">7</Text>
      </Arrange>
      <Arrange gap="xsmall">
        <Icon color="bodyDimmed" icon={<SvgComment />}/>
        <Text color="bodyDimmed">2</Text>
      </Arrange>
    </Arrange>
  </Arrange>
</Container>

In this example, we use Arrange to solve a simple layout problem: a card with horizontally aligned and spaced-out elements.

Spacing and dimensions

Layout components have the advantage of custom spacing and dimensions. We can specify properties like width and gap with values like units width={20} or preset spacing gap="small".

<Container maxWidth={40} borderSide="all" padding="medium">
  <Arrange gap="small" columns={['1fr', 'auto']} alignItems="end">
    <FormField
      direction="column"
      label="Email"
      labelFor="columnExampleTextInput"
    >
      <TextInput id="columnExampleTextInput" />
    </FormField>
    <Button>Send</Button>
  </Arrange>
</Container>

To understand better how spacing and dimension properties work see the Container's Padding and dimensions section.

When to add custom CSS

Layout component can cover most of the cases but not all. After building the basic structure with layout components we can add some additional CSS for custom behavior.

Combine the custom CSS with Lens CSS variables.

.myClass {
  flex-grow: 3;
  padding: var(--lns-space-large);
  margin-bottom: var(--lns-space-small);
  border-radius: var(--lns-radius-medium);
}

Don't add custom styles to components: The risk of modifying components with custom styles.

When NOT to use Lens to compose layouts

Layouts are one of the most common parts of an interface and each layout has slightly different needs. Because there are so many possible layout combinations, a system can't create patterns that cover all cases. Some layouts are too complex or need a specific behavior. For reference, check CSS flex and grid properties, just these can generate a huge amount of layout combinations.

In cases where Lens tools are too constraining and more granular control is needed, compose with custom CSS.