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>