The segment layout is basicly a grid with 12 columns. The number and the proportion of the columns can be set with `large`, `medium`, `small` or `extraSmall`. Every attribute has a different css class, but the usage is the same. The value is a semicolon separated list of integers, which sum has to be '12'. A value of n will use n columns from the grid.

This example show a segment layout with four columns and a segment layout with three columns. The numbers are displayed via the `<tc:label/>` tag. The space is set via the `<tc:hidden/>` tag.

    <tc:segmentLayout medium="1;6;2;3">

    <tc:segmentLayout medium="2;4;6">

For the different kinds of screen sizes, the segment layout has four attributes: `large`, `medium`, `small` and `extraSmall`. The first two ones should be used for desktops. The last two should be used for tablets and phones. Notice, that only the screen 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 large="2;2;2;2;2;2"
      medium="3;3;3;3" small="4;4;4" extraSmall="6;6">
        ...