The segment layout is a grid with 12 columns. The number and the proportion of the columns can be set with the attributes `extraSmall`, `small`, `medium`, `large`, `extraLarge` and `extra2Large`. The value is a space separated list. Allowed are '1seg' to '12seg', 'auto' and '1fr'.

The following examples show a segment layout with four and three columns and a segment layout with 'auto' and '1fr'.

The sum of the values is 12.

<tc:segmentLayout extraSmall="2seg 3seg 4seg 3seg">

The sum of the values is 8. After the third element, the sequence starts from the beginning. So the fourth element got a value of 2.

<tc:segmentLayout extraSmall="2seg 2seg 4seg"> <tc:segmentLayout extraSmall="1fr auto 1fr">

the remaining space

width of the content

the remaining space

For the different kinds of screen sizes, the segment layout has the attributes: `extraSmall`, `small`, `medium`, `large`, `extraLarge` and `extra2Large`.

In the following example, all attributes are used. If you are on a desktop you can see the different behavior by changing the size of the browser window.

<tc:segmentLayout extra2Large="1seg" extraLarge="2seg" large="3seg" medium="4seg" small="5seg" extraSmall="6seg"> ...

The segment layout has 12 columns. If a row doesn't use all columns, the position of the content can be influenced with a .

If a margin is set in a segment, it try to use all remaining space.

- Margin on the left pushes the segment to the right.
- Margin on the right pushes the segment to the left.
- Margin on both sides center the segment.

The margin is set for different screen sizes with the following attributes: `marginExtraSmall`, `marginSmall`, `marginMedium`, `marginLarge`, `marginExtraLarge` and `marginExtra2Large`.

Possible values are `none`, `left`, `right` and `both`.

In the example, each row has two segments that use 5 columns and 4 columns, leaving 3 columns unused.
In the first row, no margin is set. Both segments are on the most left side. The remaining space is on the right.
In the second row, the first segment has a margin on the left, pushing the segment to the right.
In the third row, the first segment has margin on both sides. The margin use all available space, centering the first segment. The second segment is pushed on the most right side.
In the fourth row, the first segment has a margin on the right, unsing the remaining 3 columns, so the second segment is on the most right position.

<tc:segmentLayout extraSmall="5seg 4seg" marginExtraSmall="none none left none both none right none"> ...

An offset can be set for the different proportions with the `<tc:segmentLayoutConstraint/>` tag which can have the attributes `offsetExtraSmall`, `offsetSmall`,`offsetMedium`, `offsetLarge`, `offsetExtraLarge` and `offsetExtra2Large`.

Possible values are from 1 to 11 for `offsetExtraSmall`.
For the other attributes possible values are from 0 to 11.
A `offsetMedium="0"` overwrite the offset from smaller proportions.

<tc:segmentLayout extraSmall="2seg 2seg 2seg 2seg 2seg 2seg"> <tc:in value="1"/> <tc:in value="2"> <tc:segmentLayoutConstraint offsetExtraSmall="1" offsetSmall="2" offsetMedium="3" offsetLarge="4" offsetExtraLarge="5"/> </tc:in> ... </tc:segmentLayout>

The default layout and margins can be overwritten by the `<tc:segmentLayoutConstraint/>` tag. Possible attributes are `extraSmall`, `small`, `medium`, `large`, `extraLarge` and `extra2Large` for the layout.
And: `marginExtraSmall`, `marginSmall`, `marginMedium`, `marginLarge`, `marginExtraLarge` and `marginExtra2Large` for the margins.

<tc:segmentLayout extraSmall="4seg 8seg"> <tc:in value="4"/> <tc:in value="8"/> <tc:in value="3 - both"> <tc:segmentLayoutConstraint extraSmall="3seg" marginExtraSmall="both"/> </tc:in> <tc:in value="8"/> </tc:segmentLayout>

The horizontal alignment can be set with `justify`. Possible attributes are none, start, center, end, around and between. The default value is none.

<tc:segmentLayout extraSmall="4seg 4seg" justify="none"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="start"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="center"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="end"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="around"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="between"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout>