#Layout

#Description

To make it easier to build application layout and form-views in line with defined design sketches, there are a number of components for layout.

• Spacing table and information.

• Media Queries and breakpoints table and information.

• Flex is a building block for CSS flexbox based layout of contents, components and forms.

• Grid is a layout system for CSS grid based layout of contents.

• Space is a component that provides margins within the provided spacing patterns.

#Deprecated layout components

• FormSet is deprecated. Use Flex, the Forms extension and the Eufemia Provider as an replacement.

• FormRow is deprecated. Use Flex and the Forms extension as an replacement.

#Units and responsiveness

Please – use rem instead of px for all of your custom CSS, and make sure;

• you always use the nearest half rem value, like 0.5rem, 1rem or 1.5rem and so forth.
• you always get a total computed height within the grid.

This results in maintaining the integrity of the 8px base grid.

#Exceptions

There are exceptions for when you define a "minimum" of an area, such as min-width. Because it will increase in size when a larger browser font-size is used. In that case, user px as your sizing unit.

#Smaller Units

Sometimes you may need a compensation of only a few pixels. Heres how to calculate the correct rem values:

• 1px = 1/16x1 = 0.0625rem
• 2px = 1/16x2 = 0.125rem
• And so on ...

#Columns

UX designers are using a 12 column system, along with a 4 and 6 column system, during their design processes.

#What are the differences between Flex and Grid?

Both to support different sizing of items on different media breakpoints.

Flex

Uses CSS flexbox.

• Best suited for Forms layout.
• Can either stack vertically or horizontally.
• Can be used with any kind of children.
• Even distribution of space.
• Keeps order of items like they were given in the DOM structure.
• Items can be sized in percentage.
• When a size (percentage) is given, they stack horizontally.

import { Flex } from '@dnb/eufemia'
render(
  <Flex.Container>
    <Flex.Item>content</Flex.Item>
    <OtherComponent>content</OtherComponent>
  </Flex.Container>,
)

Grid

Uses CSS grid.

• Best suited for applications with a column based layout.
• Columns do change between 4, 6 and 12 on the given size (media query) of the browser or screen size.
• The Grid.Container depends on Grid.Item.
• Items do span from column "a" to "b".
• Items can have different order in opposition from what's given in the DOM structure.

import { Grid } from '@dnb/eufemia'

render(
  <Grid.Container>
    <Grid.Item>content</Grid.Item>
    <Grid.Item>content</Grid.Item>
  </Grid.Container>,
)

#Demos

#Horizontal aligned Cards

Grid wraps the Cards nicely on smaller screens. More examples in the Card section.

<Grid.Container
  columns={{
    small: 1,
    medium: 3,
    large: 3,
  }}
  columnGap="small"
>
  <Card stack>
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
  <Card stack>
    <H2>Heading</H2>
    <P>Pariatur officia sit adipisicing pariatur commodo enim do quis</P>
  </Card>
  <Card stack>
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
</Grid.Container>

#Accordion in two columns

This is a demo of how to outline accordions in two columns, including the correct tab order.

const items = [
  <Accordion key="one" variant="filled">
    <Accordion.Header>
      Sit amet suscipit ipsum tincidunt id?
    </Accordion.Header>
    <Accordion.Content space>
      <P>
        Sociis sapien sociosqu vel sollicitudin accumsan laoreet gravida
        himenaeos nostra mollis volutpat bibendum convallis cum condimentum
        dictumst blandit rutrum vehicula
      </P>
    </Accordion.Content>
  </Accordion>,
  <Accordion key="two" variant="filled">
    <Accordion.Header>
      Cras eget quam eget tortor placerat viverra?
    </Accordion.Header>
    <Accordion.Content space>
      <P>
        Morbi condimentum odio ut enim vulputate, rutrum ullamcorper sem
        vestibulum. Ut luctus tempus leo vel finibus. Pellentesque ultrices
        interdum nisi, sit amet suscipit ipsum tincidunt id. Praesent
        sodales vel eros ut accumsan.
      </P>
    </Accordion.Content>
  </Accordion>,
  <Accordion key="three" variant="filled">
    <Accordion.Header>Nam porta nec ipsum id porta</Accordion.Header>
    <Accordion.Content space>
      <P>
        Nam porta nec ipsum id porta. Cras eget quam eget tortor placerat
        viverra.
      </P>
    </Accordion.Content>
  </Accordion>,
]
render(
  <>
    <Heading size="large">Accordion in columns</Heading>
    <Grid.Container columns={2} columnGap="small" rowGap="x-small">
      <Grid.Item
        span={{
          small: [1, 2],
          medium: [1, 1],
          large: [1, 1],
        }}
      >
        <Flex.Stack gap="x-small">{items}</Flex.Stack>
      </Grid.Item>
      <Grid.Item
        span={{
          small: [1, 2],
          medium: [2, 2],
          large: [2, 2],
        }}
      >
        <Flex.Stack gap="x-small">{[...items].reverse()}</Flex.Stack>
      </Grid.Item>
    </Grid.Container>
  </>,
)

#Responsive application Grid usage

#Responsive Flex usage

With the default sizeCount of 12 parts.

#Customized Flex.Item sizes

With a custom amount of 4 parts (sizeCount) as well as custom breakpoints and media queries.

#Flex usage in Forms