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` and `extraLarge`. 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 five attributes: `extraSmall`, `small`, `medium`, `large` and `extraLarge`. The first three should be used for desktops. The last two should be used for tablets and phones. Notice, that only the browser size matters. So a small browser window on a big screen also reacts with `small` and `extraSmall`.

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 extraLarge="1seg" large="2seg" medium="3seg" small="4seg" extraSmall="6seg"> ...

A margin can be set for the different proportions with the attributes `marginExtraSmall`, `marginSmall`, `marginMedium`, `marginLarge` and `marginExtraLarge`.

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

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

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

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` and `extraLarge` for the layout.
And: `marginExtraSmall`, `marginSmall`, `marginMedium`, `marginLarge`, `marginExtraLarge` 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>