#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>

#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