You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2017/11/29 15:59:39 UTC

[myfaces-tobago] 04/06: TOBAGO-1818: Progress in the Measure class (cleanup and CSS support) * using 1fr instead of 1* and * using " " instead of "; "

This is an automated email from the ASF dual-hosted git repository.

lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit fcb82a5471a6f78722a4a2ab1e41f504e65f496c
Author: Udo Schnurpfeil <lo...@apache.org>
AuthorDate: Wed Nov 29 16:40:37 2017 +0100

    TOBAGO-1818: Progress in the Measure class (cleanup and CSS support)
    * using 1fr instead of 1* and
    * using " " instead of ";"
---
 src/site/fml/faq.fml                               |  4 +-
 .../50-migration/96-migration/migration40.xhtml    |  2 +-
 .../50-migration/99-migration/migration15.xhtml    | 26 +++++-----
 .../20-component/020-output/20-label/label.xhtml   |  4 +-
 .../21-buttons-customizer/buttons-customizer.xhtml |  2 +-
 .../20-component/050-container/60-bar/bar.xhtml    | 16 +++----
 .../080-sheet/30-event/sheet-event.xhtml           |  2 +-
 .../080-sheet/35-markup/sheet-markup.xhtml         |  2 +-
 .../080-sheet/40-style/sheet-style.xhtml           |  2 +-
 .../080-sheet/50-filter/sheet-filter.xhtml         |  2 +-
 .../55-staticheader/sheet-static-header.xhtml      |  4 +-
 .../60-multiheader/sheet-multi-header.xhtml        |  4 +-
 .../20-component/080-sheet/x-sheet-nested.xhtml    |  4 +-
 .../090-tree/01-select/tree-select.xhtml           |  2 +-
 .../content/20-component/090-tree/tree.xhtml       |  2 +-
 .../content/20-component/100-upload/upload.xhtml   |  2 +-
 .../30-concept/16-layout/20-flex/flex-layout.xhtml | 14 +++---
 .../16-layout/30-segment/segment-layout.xhtml      |  6 +--
 .../30-concept/16-layout/50-grid/grid-layout.xhtml |  6 +--
 .../16-layout/60-split/split-layout.xhtml          |  6 +--
 .../content/30-concept/16-layout/layout.xhtml      |  2 +-
 .../webapp/content/30-concept/21-error/error.xhtml |  2 +-
 .../content/30-concept/50-partial/partial.xhtml    | 12 ++---
 .../35-deprecated/70-grid-layout/grid-layout.xhtml | 10 ++--
 .../40-test/2000-selectItem/type-of-literals.xhtml |  2 +-
 .../3000-sheet/10-sheet-types/sheet-types.xhtml    |  4 +-
 .../40-test/4700-flexLayout/x-template.xhtml       |  2 +-
 .../4000-button+link/button+link.xhtml             |  4 +-
 .../40-test/7000-layout/markup-spread-flex.xhtml   |  2 +-
 .../40-test/7000-layout/markup-spread-grid.xhtml   |  2 +-
 .../40-test/90000-attic/attribute/attribute.xhtml  |  4 +-
 .../90000-attic/attribute/mode-valueIfSet.xhtml    |  4 +-
 .../90000-attic/attribute/popup-modal.xhtml        |  2 +-
 .../40-test/90000-attic/cell/3x3-center.xhtml      |  2 +-
 .../90000-attic/cell/position-4x4-span-steps.xhtml |  2 +-
 .../content/40-test/90000-attic/cell/subview.xhtml |  4 +-
 .../40-test/90000-attic/date/date-layout.xhtml     |  2 +-
 .../90000-attic/date/date-tobago-1105.xhtml        |  2 +-
 .../content/40-test/90000-attic/date/date.xhtml    |  2 +-
 .../40-test/90000-attic/date/datetime.xhtml        |  4 +-
 .../90000-attic/error/display-exception.xhtml      |  2 +-
 .../90000-attic/error/throw-exception.xhtml        |  4 +-
 .../40-test/90000-attic/file/file-markup.xhtml     |  2 +-
 .../flexLayout/flexLayout-horizontal.xhtml         |  6 +--
 .../90000-attic/flexLayout/flexLayout-simple.xhtml |  2 +-
 .../flexLayout/flexLayout-vertical.xhtml           |  6 +--
 .../flowLayout/flowLayout-textAlign.xhtml          |  2 +-
 .../90000-attic/forEach/dynamic-include.xhtml      |  4 +-
 .../90000-attic/forEach/panel-one-fragment.xhtml   |  2 +-
 .../90000-attic/forEach/panel-three-fragment.xhtml |  2 +-
 .../90000-attic/forEach/panel-two-fragment.xhtml   |  2 +-
 .../gridLayout/auto-vertical-in+in.xhtml           |  2 +-
 .../horizontal-600px-asterisk-default.xhtml        |  2 +-
 .../40-test/90000-attic/gridLayout/nested-4.xhtml  | 10 ++--
 .../90000-attic/gridLayout/nested-simple.xhtml     |  4 +-
 .../40-test/90000-attic/gridLayout/nested-v.xhtml  |  4 +-
 .../40-test/90000-attic/gridLayout/nested.xhtml    |  8 ++--
 .../90000-attic/gridLayout/not-exact-4x4.xhtml     |  2 +-
 .../40-test/90000-attic/gridLayout/not-exact.xhtml |  2 +-
 .../gridLayout/position-1+1x1-span.xhtml           |  2 +-
 .../gridLayout/position-10x10-span.xhtml           |  2 +-
 .../90000-attic/gridLayout/position-2x2-out.xhtml  |  2 +-
 .../gridLayout/position-2x2-span-bottom.xhtml      |  2 +-
 .../gridLayout/position-2x2-span-left.xhtml        |  2 +-
 .../gridLayout/position-2x2-span-right.xhtml       |  2 +-
 .../gridLayout/position-2x2-span-top.xhtml         |  2 +-
 .../90000-attic/gridLayout/position-2x2.xhtml      |  2 +-
 .../gridLayout/position-4x4-span-steps.xhtml       |  2 +-
 .../gridLayout/proportion-versus-minimum.xhtml     |  2 +-
 .../relative-inside-auto-1-1-cannot-match.xhtml    |  6 +--
 .../gridLayout/relative-inside-auto-1-1.xhtml      |  6 +--
 .../gridLayout/relative-inside-auto-1-3.xhtml      |  6 +--
 .../relative-inside-auto-2-columns.xhtml           |  2 +-
 .../gridLayout/relative-inside-auto-2-rows.xhtml   |  2 +-
 .../gridLayout/rendered-auto-2x2-all-but-1.xhtml   |  2 +-
 .../gridLayout/rendered-auto-2x2-all-but-2.xhtml   |  2 +-
 .../gridLayout/rendered-auto-2x2-all-but-3.xhtml   |  2 +-
 .../gridLayout/rendered-auto-2x2-all-but-4.xhtml   |  2 +-
 .../gridLayout/rendered-combinations.xhtml         | 56 +++++++++++-----------
 .../gridLayout/rendered-pixel-2x2-all-but-1.xhtml  |  2 +-
 .../gridLayout/rendered-pixel-2x2-all-but-2.xhtml  |  2 +-
 .../gridLayout/rendered-pixel-2x2-all-but-3.xhtml  |  2 +-
 .../gridLayout/rendered-pixel-2x2-all-but-4.xhtml  |  2 +-
 .../gridLayout/rendered-prop-2x2-all-but-1.xhtml   |  2 +-
 .../gridLayout/rendered-prop-2x2-all-but-2.xhtml   |  2 +-
 .../gridLayout/rendered-prop-2x2-all-but-3.xhtml   |  2 +-
 .../gridLayout/rendered-prop-2x2-all-but-4.xhtml   |  2 +-
 .../40-test/90000-attic/gridLayout/rigid.xhtml     |  8 ++--
 .../gridLayout/scrolling-2-levels.xhtml            |  4 +-
 .../90000-attic/gridLayout/scrolling-box.xhtml     |  2 +-
 .../90000-attic/gridLayout/scrolling-page.xhtml    |  2 +-
 .../gridLayout/scrolling-panel-with-border.xhtml   |  2 +-
 .../90000-attic/gridLayout/scrolling-panel.xhtml   |  2 +-
 .../90000-attic/gridLayout/scrolling-tab.xhtml     |  2 +-
 .../90000-attic/gridLayout/size-maximum.xhtml      |  2 +-
 .../90000-attic/gridLayout/size-minimum.xhtml      |  2 +-
 .../90000-attic/gridLayout/spacing-nested.xhtml    | 10 ++--
 .../90000-attic/gridLayout/spacing-simple.xhtml    |  2 +-
 .../gridLayout/tabGroup-auto-auto.xhtml            |  4 +-
 .../90000-attic/gridLayout/tabGroup-auto.xhtml     |  4 +-
 .../90000-attic/gridLayout/tabGroup-relative.xhtml |  4 +-
 .../90000-attic/gridLayout/tobago-1239.xhtml       |  2 +-
 .../90000-attic/gridLayout/tobago-1243.xhtml       |  4 +-
 .../gridLayout/too-less-components-empty.xhtml     |  2 +-
 .../too-less-components-horizontal-6.xhtml         |  2 +-
 .../too-less-components-horizontal.xhtml           |  2 +-
 .../too-less-components-vertical-6.xhtml           |  2 +-
 .../gridLayout/too-less-components-vertical.xhtml  |  2 +-
 .../gridLayout/too-much-components.xhtml           |  2 +-
 .../90000-attic/image/alphaBlendingBug.xhtml       |  6 +--
 .../40-test/90000-attic/image/disabled.xhtml       |  2 +-
 .../40-test/90000-attic/in/id-and-fieldId.xhtml    |  4 +-
 .../content/40-test/90000-attic/in/in-layout.xhtml |  2 +-
 .../content/40-test/90000-attic/in/in-tx.xhtml     |  2 +-
 .../40-test/90000-attic/label/for-auto.xhtml       |  4 +-
 .../40-test/90000-attic/label/label-tx.xhtml       |  2 +-
 .../content/40-test/90000-attic/label/label.xhtml  |  4 +-
 .../40-test/90000-attic/link/link-layout.xhtml     |  2 +-
 .../40-test/90000-attic/markup/tobago-1215.xhtml   |  2 +-
 .../messages/messages-confirmation.xhtml           |  2 +-
 .../40-test/90000-attic/messages/messages.xhtml    |  2 +-
 .../90000-attic/popup/popup-bug-tobago-1091.xhtml  |  6 +--
 .../90000-attic/popup/popup-bug-tobago-1103.xhtml  | 12 ++---
 .../popup/popup-close-after-submit-and-ajax.xhtml  |  6 +--
 .../90000-attic/popup/popup-draggable.xhtml        |  4 +-
 .../40-test/90000-attic/popup/popup-in-sheet.xhtml | 12 ++---
 .../40-test/90000-attic/popup/z-index.xhtml        | 22 ++++-----
 .../content/40-test/90000-attic/reload/tip.xhtml   |  4 +-
 .../90000-attic/resource/resource-manager.xhtml    |  4 +-
 .../40-test/90000-attic/resource/tobago-694.xhtml  |  2 +-
 .../40-test/90000-attic/script/script-event.xhtml  |  6 +--
 .../checkbox-bug-tobago-1041.xhtml                 | 10 ++--
 .../selectBooleanCheckbox-layout.xhtml             |  2 +-
 .../selectBooleanCheckbox.xhtml                    |  2 +-
 .../selectManyCheckbox-layout.xhtml                |  2 +-
 .../selectManyCheckbox/selectManyCheckbox.xhtml    |  2 +-
 .../selectManyListbox-layout.xhtml                 |  2 +-
 .../selectManyListbox-value.xhtml                  |  2 +-
 .../selectManyListbox/selectManyListbox.xhtml      |  2 +-
 .../selectManyShuttle-layout.xhtml                 |  2 +-
 .../selectManyShuttle-value.xhtml                  |  2 +-
 .../selectManyShuttle/selectManyShuttle.xhtml      |  2 +-
 .../selectOneChoice/selectOneChoice-layout.xhtml   |  2 +-
 .../selectOneChoice/selectOneChoice.xhtml          |  2 +-
 .../selectOneListbox/selectOneListbox-layout.xhtml |  2 +-
 .../selectOneListbox/selectOneListbox.xhtml        |  2 +-
 .../selectOneRadio/selectOneRadio-layout.xhtml     |  2 +-
 .../selectOneRadio/selectOneRadio.xhtml            |  2 +-
 .../separator/separator-with-label-facet.xhtml     |  2 +-
 .../separator/separator-with-label.xhtml           |  2 +-
 .../separator/separator-without-label.xhtml        |  2 +-
 .../sheet/sheet-auto-height-header-footer.xhtml    | 10 ++--
 .../90000-attic/sheet/sheet-auto-height-rows.xhtml | 10 ++--
 .../90000-attic/sheet/sheet-auto-width.xhtml       |  2 +-
 .../90000-attic/sheet/sheet-bug-tobago-1090.xhtml  |  4 +-
 .../40-test/90000-attic/sheet/sheet-large.xhtml    |  6 +--
 .../90000-attic/sheet/sheet-multi-header.xhtml     |  6 +--
 .../40-test/90000-attic/sheet/sheet-paging-1.xhtml |  2 +-
 .../90000-attic/sheet/sheet-paging-11.xhtml        |  2 +-
 .../90000-attic/sheet/sheet-paging-20.xhtml        |  2 +-
 .../40-test/90000-attic/sheet/sheet-reload.xhtml   |  4 +-
 .../40-test/90000-attic/sheet/sheet-selector.xhtml |  4 +-
 .../40-test/90000-attic/sheet/sheet-simple.xhtml   |  2 +-
 .../40-test/90000-attic/sheet/sheet-sort.xhtml     |  2 +-
 .../40-test/90000-attic/sheet/sheet-tree.xhtml     |  6 +--
 .../sheet/sheet-unknown-row-count.xhtml            |  2 +-
 .../40-test/90000-attic/tabGroup/simple.xhtml      |  4 +-
 .../40-test/90000-attic/text/textarea-layout.xhtml |  2 +-
 .../content/40-test/90000-attic/time/time.xhtml    |  2 +-
 .../40-test/90000-attic/tree/tree-command.xhtml    |  2 +-
 .../40-test/90000-attic/tree/tree-expanded.xhtml   |  2 +-
 .../40-test/90000-attic/tree/tree-infinite.xhtml   |  2 +-
 .../90000-attic/tree/tree-marked-with-model.xhtml  |  4 +-
 .../tree/tree-marked-without-model.xhtml           |  4 +-
 .../90000-attic/tree/tree-select-via-state.xhtml   |  4 +-
 .../90000-attic/tree/tree-select-via-value.xhtml   |  4 +-
 .../90000-attic/tree/tree-show-attributes.xhtml    |  4 +-
 .../90000-attic/tree/tree-simple-with-data.xhtml   |  2 +-
 .../40-test/90000-attic/tree/tree-simple.xhtml     |  2 +-
 .../90000-attic/treeMenu/treeMenu-command.xhtml    |  2 +-
 .../90000-attic/treeMenu/treeMenu-simple.xhtml     |  2 +-
 .../type/measure-image-with-constraints.xhtml      |  2 +-
 .../type/measure-image-without-constraints.xhtml   |  2 +-
 .../tobago-example-demo/src/main/webapp/init.xhtml |  2 +-
 .../src/main/webapp/logging-info.xhtml             |  4 +-
 .../tobago-example-demo/src/main/webapp/main.xhtml |  2 +-
 .../tobago-example-demo/src/main/webapp/menu.xhtml |  8 ++--
 .../src/main/webapp/server-info.xhtml              |  2 +-
 188 files changed, 364 insertions(+), 364 deletions(-)

diff --git a/src/site/fml/faq.fml b/src/site/fml/faq.fml
index f8d328b..edad68a 100644
--- a/src/site/fml/faq.fml
+++ b/src/site/fml/faq.fml
@@ -92,7 +92,7 @@
       <question>How do I use GridLayout in Tobago?</question>
       <answer>
         <source>
-&lt;tc:gridLayout rows="fixed;100px;1*;2*" /></source>
+&lt;tc:gridLayout rows="auto 100px 1fr 2fr" /></source>
         <p>
           The attribute 'fixed' means a theme dependent height of one row (i.e. in Speyside
           a row is typically 20px high.) In a 'fixed' row all one height unit high elements find their place
@@ -101,7 +101,7 @@
         </p>
         <p>
           Alternatively you can give elements a proportion with the * notation.<br/>
-          For example rows="1*;2*" gives the first row 1/3 of the available vertical space and the
+          For example rows="1fr 2fr" gives the first row 1/3 of the available vertical space and the
           second row 2/3. This works fine for columns, too.
         </p>
         <p>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
index 9e09860..cdad212 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
@@ -94,7 +94,7 @@
         <p>... with this:</p>
         <pre><code class="language-markup">&lt;tc:bar>
   &lt;f:facet name="after">
-    &lt;tc:flexLayout columns="*;auto">
+    &lt;tc:flexLayout columns="1fr auto">
       // right sided content
     &lt;/tc:flexLayout>
   &lt;/f:facet>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/99-migration/migration15.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/99-migration/migration15.xhtml
index b04444e..2e6bbb9 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/99-migration/migration15.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/99-migration/migration15.xhtml
@@ -146,63 +146,63 @@
       <p>If you are using <code>submitAction()</code> in the old code, you have to add the action element or just
         <code>null</code>. If you are using <code>submitAction2()</code> in the old code, you have to rename it to
         <code>submitAction()</code>.</p>
-      <tc:flexLayout rows="auto;auto">
-        <tc:flexLayout columns="1;1;1">
+      <tc:flexLayout rows="auto auto">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>added first parameter and put all parameters after the second to an options map</p></tc:panel>
           <tc:panel><p><code>submitAction()</code></p></tc:panel>
           <tc:panel/>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>renamed</p></tc:panel>
           <tc:panel><p><code>submitAction2()</code></p></tc:panel>
           <tc:panel><p><code>submitAction()</code></p></tc:panel>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>added first parameter</p></tc:panel>
           <tc:panel><p><code>openPopupWithAction()</code></p></tc:panel>
           <tc:panel/>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>renamed</p></tc:panel>
           <tc:panel><p><code>openPopupWithAction2()</code></p></tc:panel>
           <tc:panel><p><code>openPopupWithAction()</code></p></tc:panel>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>added first parameter</p></tc:panel>
           <tc:panel><p><code>reloadComponent()</code></p></tc:panel>
           <tc:panel/>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>renamed</p></tc:panel>
           <tc:panel><p><code>reloadComponent2()</code></p></tc:panel>
           <tc:panel><p><code>reloadComponent()</code></p></tc:panel>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>added first parameter</p></tc:panel>
           <tc:panel><p><code>Updater.update()</code></p></tc:panel>
           <tc:panel/>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>renamed</p></tc:panel>
           <tc:panel><p><code>Updater.update2()</code></p></tc:panel>
           <tc:panel><p><code>Updater.update()</code></p></tc:panel>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>added first parameter</p></tc:panel>
           <tc:panel><p><code>Sheet.reloadWithAction()</code></p></tc:panel>
           <tc:panel/>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>renamed</p></tc:panel>
           <tc:panel><p><code>Sheet.reloadWithAction2()</code></p></tc:panel>
           <tc:panel><p><code>Sheet.reloadWithAction()</code></p></tc:panel>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1">
+        <tc:flexLayout columns="1 1 1">
           <tc:panel><p>added first parameter</p></tc:panel>
           <tc:panel><p><code>TabGroup.reloadWithAction()</code></p></tc:panel>
           <tc:panel/>
         </tc:flexLayout>
-        <tc:flexLayout columns="1;1;1;">
+        <tc:flexLayout columns="1 1 1;">
           <tc:panel><p>renamed</p></tc:panel>
           <tc:panel><p><code>TabGroup.reloadWithAction2()</code></p></tc:panel>
           <tc:panel><p><code>TabGroup.reloadWithAction()</code></p></tc:panel>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/20-label/label.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/20-label/label.xhtml
index 699fd75..67ec01d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/20-label/label.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/20-label/label.xhtml
@@ -32,10 +32,10 @@
   </tc:section>
 
   <tc:section label="Input Field">
-    <p>With <code class="language-markup">&lt;tc:flexLayout columns="250px;*;200px"></code> a label is set
+    <p>With <code class="language-markup">&lt;tc:flexLayout columns="250px 1fr 200px"></code> a label is set
       in front and after an inputfield. The <code>label</code> attribute is not used for
       <code class="language-markup">&lt;tc:in/></code>.</p>
-    <tc:flexLayout columns="250px;*;200px">
+    <tc:flexLayout columns="250px 1fr 200px">
       <tc:label id="l2" value="Label in front of inputfield"/>
       <tc:in id="i1" placeholder="Inputfield"/>
       <tc:label id="l3" value="Label after inputfield"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/21-buttons-customizer/buttons-customizer.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/21-buttons-customizer/buttons-customizer.xhtml
index 251af18..55fc446 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/21-buttons-customizer/buttons-customizer.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/21-buttons-customizer/buttons-customizer.xhtml
@@ -41,7 +41,7 @@
       </c:forEach>
     </tc:buttons>
 
-    <tc:sheet var="item" value="#{customizer.list}" columns="*;*;*;*" id="sheet">
+    <tc:sheet var="item" value="#{customizer.list}" columns="1fr 1fr 1fr 1fr" id="sheet">
       <tc:column label="Item Name">
         <tc:out value="#{item.label}"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
index 50dd274..3e9565b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
@@ -44,7 +44,7 @@
     &lt;tc:link label="Link Two"/>
   &lt;/tc:links>
   &lt;f:facet name="after">
-    &lt;tc:flexLayout columns="*; auto">
+    &lt;tc:flexLayout columns="1fr  auto">
       &lt;tc:in placeholder="Search" labelLayout="skip"/>
       &lt;tc:button label="Go"/>
     &lt;/tc:flexLayout>
@@ -60,7 +60,7 @@
         <tc:link label="Link Two"/>
       </tc:links>
       <f:facet name="after">
-        <tc:flexLayout columns="*; auto">
+        <tc:flexLayout columns="1fr  auto">
           <tc:in placeholder="Search" labelLayout="skip"/>
           <tc:button label="Go"/>
         </tc:flexLayout>
@@ -94,7 +94,7 @@
         </tc:links>
       </div>
       <f:facet name="after">
-        <tc:flexLayout columns="*; auto">
+        <tc:flexLayout columns="1fr  auto">
           <tc:button label="Button"/>
         </tc:flexLayout>
       </f:facet>
@@ -154,7 +154,7 @@
         <tc:link label="Link Two"/>
       </tc:links>
       <f:facet name="after">
-        <tc:flexLayout columns="*; auto">
+        <tc:flexLayout columns="1fr  auto">
           <tc:in placeholder="Search" labelLayout="skip"/>
           <tc:button label="Go"/>
         </tc:flexLayout>
@@ -170,7 +170,7 @@
         <tc:link label="Link Two"/>
       </tc:links>
       <f:facet name="after">
-        <tc:flexLayout columns="*; auto">
+        <tc:flexLayout columns="1fr  auto">
           <tc:in placeholder="Search" labelLayout="skip"/>
           <tc:button label="Go"/>
         </tc:flexLayout>
@@ -186,7 +186,7 @@
         <tc:link label="Link Two"/>
       </tc:links>
       <f:facet name="after">
-        <tc:flexLayout columns="*; auto">
+        <tc:flexLayout columns="1fr  auto">
           <tc:in placeholder="Search" labelLayout="skip"/>
           <tc:button label="Go"/>
         </tc:flexLayout>
@@ -202,7 +202,7 @@
         <tc:link label="Link Two"/>
       </tc:links>
       <f:facet name="after">
-        <tc:flexLayout columns="*; auto">
+        <tc:flexLayout columns="1fr  auto">
           <tc:in placeholder="Search" labelLayout="skip"/>
           <tc:button label="Go"/>
         </tc:flexLayout>
@@ -218,7 +218,7 @@
         <tc:link label="Link Two"/>
       </tc:links>
       <f:facet name="after">
-        <tc:flexLayout columns="*; auto">
+        <tc:flexLayout columns="1fr  auto">
           <tc:in placeholder="Search" labelLayout="skip"/>
           <tc:button label="Go"/>
         </tc:flexLayout>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/30-event/sheet-event.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/30-event/sheet-event.xhtml
index eae3a32..214eeef 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/30-event/sheet-event.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/30-event/sheet-event.xhtml
@@ -40,7 +40,7 @@
     <p>Select an object from the SolarObjects list.</p>
     <tc:segmentLayout id="example" medium="5;7">
       <tc:box label="Solar Objects">
-        <tc:sheet id="s1" value="#{sheetController.solarList}" var="object" columns="*" markup="small">
+        <tc:sheet id="s1" value="#{sheetController.solarList}" var="object" columns="1fr" markup="small">
           <tc:style maxHeight="486px"/>
           <tc:column label="#{demoBundle.solarArrayName}">
             <tc:out value="#{object.name}" id="t_name" labelLayout="skip"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/35-markup/sheet-markup.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/35-markup/sheet-markup.xhtml
index f8256cd..cb16a3c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/35-markup/sheet-markup.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/35-markup/sheet-markup.xhtml
@@ -43,7 +43,7 @@
   <tc:section label="Markup">
     <pre><code class="language-markup">&lt;tc:sheet markup="inverse hover" ...></code></pre>
     <tc:sheet markup="#{sheetController.markup}" value="#{sheetController.solarList}" var="object" rows="4"
-              columns="#{sheetController.automaticLayout ? null : '*;*;*;*;*'}">
+              columns="#{sheetController.automaticLayout ? null : '1fr 1fr 1fr 1fr 1fr'}">
       <tc:column label="Name">
         <tc:out value="#{object.name}" labelLayout="skip"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/40-style/sheet-style.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/40-style/sheet-style.xhtml
index cceb397..e3b17a8 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/40-style/sheet-style.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/40-style/sheet-style.xhtml
@@ -31,7 +31,7 @@
   </p>
 
   <tc:sheet value="#{sheetController.solarList}" var="object" rows="20" markup="small"
-            columns="#{sheetController.automaticLayout ? null : '*;*;*;*;*'}">
+            columns="#{sheetController.automaticLayout ? null : '1fr 1fr 1fr 1fr 1fr'}">
     <tc:row>
       <tc:style customClass="#{object.orbit eq 'Sun' ? 'planet' : ''}"/>
     </tc:row>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/50-filter/sheet-filter.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/50-filter/sheet-filter.xhtml
index 1689fa9..7825a8e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/50-filter/sheet-filter.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/50-filter/sheet-filter.xhtml
@@ -75,7 +75,7 @@
           </tc:panel>
           <tc:panel>
             <tc:out value="Year"/>
-            <tc:flexLayout columns="1*;1*">
+            <tc:flexLayout columns="1fr 1fr">
               <tc:selectOneChoice value="#{sheetFilterController.minYear}">
                 <tc:style width="70px"/>
                 <tc:selectItems value="#{sheetFilterController.minYearItems}"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/55-staticheader/sheet-static-header.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/55-staticheader/sheet-static-header.xhtml
index 9380f09..6cb500d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/55-staticheader/sheet-static-header.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/55-staticheader/sheet-static-header.xhtml
@@ -92,11 +92,11 @@
     <p>To get a static header, you have to set a maximal height and the
       <code>columns</code> attribute must be used to set the width of the columns manually.</p>
     <pre><code class="language-markup">&lt;tc:sheet value="\#{sheetController.solarList}" var="object" rows="10"
-      columns="3*;80px;20%;2*;1*">
+      columns="3fr 80px 20% 2fr 1fr">
   &lt;tc:style maxHeight="500px"/>
   ...</code></pre>
     <tc:sheet id="alwaysVisibleHeaderSheet" value="#{sheetController.solarList}" var="object" rows="10"
-              columns="3*;80px;20%;2*;1*">
+              columns="3fr 80px 20% 2fr 1fr">
       <tc:style maxHeight="500px"/>
       <tc:column label="Name">
         <tc:out value="#{object.name}"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/60-multiheader/sheet-multi-header.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/60-multiheader/sheet-multi-header.xhtml
index 95d46e3..e1a97ec 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/60-multiheader/sheet-multi-header.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/60-multiheader/sheet-multi-header.xhtml
@@ -45,7 +45,7 @@
   <tc:section label="Multi-Header">
     <p>For multi-header sheets, you should consider to use <code>markup="bordered"</code> for better appearance.</p>
     <pre><code class="language-markup">&lt;tc:sheet value="\#{sheetController.solarList}" var="luminary" rows="11"
-    columns="3*;2*;30px;2*;2*;2*;2*;2*;2*" markup="bordered">
+    columns="3fr 2fr 30px 2fr 2fr 2fr 2fr 2fr 2fr" markup="bordered">
   &lt;f:facet name="header">
     &lt;tc:out value="Name">
       &lt;tc:span row="3"/>
@@ -54,7 +54,7 @@
       &lt;tc:span column="2"/>
     ...</code></pre>
     <tc:sheet value="#{sheetController.solarList}" var="luminary" rows="11"
-              columns="3*;2*;30px;2*;2*;2*;2*;2*;2*" markup="bordered">
+              columns="3fr 2fr 30px 2fr 2fr 2fr 2fr 2fr 2fr" markup="bordered">
       <f:facet name="header">
         <tc:panel>
           <tc:out value="Name">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/x-sheet-nested.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/x-sheet-nested.xhtml
index 23d6871..194c8d7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/x-sheet-nested.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/080-sheet/x-sheet-nested.xhtml
@@ -23,7 +23,7 @@
   <ui:param name="title" value="#{demoBundle.sheet}"/>
 
     <tc:sheet value="#{demo.solarList}" id="sheet"
-              columns="*;2*" var="luminary">
+              columns="1fr 2fr" var="luminary">
       <tc:column label="#{demoBundle.solarArrayName}" id="name" sortable="true" markup="#{luminary.markup}">
         <tc:out value="#{luminary.name}" id="t_name"/>
       </tc:column>
@@ -31,7 +31,7 @@
                  tip="Chemical Composition of the Crust">
 
           <tc:sheet value="#{luminary.chemicalComposition}" id="nested"
-                    columns="*;*" var="element">
+                    columns="1fr 1fr" var="element">
               <tc:column label="Element" id="element" sortable="false" resizable="false">
                   <tc:out value="#{element.name}"/>
               </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/tree-select.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/tree-select.xhtml
index ea0f527..4737698 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/tree-select.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/tree-select.xhtml
@@ -36,7 +36,7 @@
     <p>The <code class="language-markup">&lt;tc:tree/></code> tag must use the <code>selectable</code> attribute.
       The value of the attribute in this example can be changed by the radio buttons in the contentbox on the right.</p>
     <tc:panel id="examplePanel">
-      <tc:flexLayout columns="*;auto">
+      <tc:flexLayout columns="1fr auto">
         <tc:tree id="categoriesTree" value="#{treeSelectController.sample}" var="node" showRoot="true"
                  selectable="#{treeSelectController.selectable}">
           <tc:treeNode>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/tree.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/tree.xhtml
index ee34626..e01fab1 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/tree.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/tree.xhtml
@@ -86,7 +86,7 @@
       <code class="language-markup">&lt;tc:tree/></code> and
       <code class="language-markup">&lt;tc:treeIndent/></code>.</p>
     <tc:panel id="p1">
-      <tc:flexLayout columns="*;auto">
+      <tc:flexLayout columns="1fr auto">
         <tc:tree value="#{treeController.sample}" var="node" showRoot="#{treeController.treeShowRoot}"
                  showRootJunction="#{treeController.treeShowRootJunction}">
           <tc:treeNode>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/100-upload/upload.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/100-upload/upload.xhtml
index fd4127c..ad2da69 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/100-upload/upload.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/100-upload/upload.xhtml
@@ -78,7 +78,7 @@
     </tc:file>
 
     <tc:section id="s4" label="Uploaded Files">
-      <tc:sheet value="#{uploadController.uploadItems}" var="item" columns="*;*;*">
+      <tc:sheet value="#{uploadController.uploadItems}" var="item" columns="1fr 1fr 1fr">
         <tc:column label="Name">
           <tc:out value="#{item.name}"/>
         </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/20-flex/flex-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/20-flex/flex-layout.xhtml
index e40a6ee..060c62b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/20-flex/flex-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/20-flex/flex-layout.xhtml
@@ -49,17 +49,17 @@
       <li>Column 4: The left space is filled with the remaining buttons in a ratio of 2:3 for this button.</li>
       <li>Column 5: Width is always set to 10rem.</li>
     </ul>
-    <tc:flexLayout columns="200px;auto;1*;2*;10rem">
+    <tc:flexLayout columns="200px auto 1fr 2fr 10rem">
       <tc:button label="200px"/>
       <tc:button label="auto"/>
-      <tc:button label="1*"/>
-      <tc:button label="2*"/>
+      <tc:button label="1fr"/>
+      <tc:button label="2fr"/>
       <tc:button label="10rem"/>
     </tc:flexLayout>
   </tc:section>
 
   <tc:section label="Rows">
-    <p>The <code>rows</code> attribute is set to '100px;auto;1*;2*;1*'. Also, the height of the flex layout is '400px'.
+    <p>The <code>rows</code> attribute is set to '100px;auto;1fr;2fr;1fr'. Also, the height of the flex layout is '400px'.
       This means:</p>
     <ul>
       <li>Row 1: Height is always at 100px.</li>
@@ -68,7 +68,7 @@
         The fourth button is twice the size than button three and five.
       </li>
     </ul>
-    <tc:flexLayout rows="100px;auto;1*;2*;1*">
+    <tc:flexLayout rows="100px auto 1fr 2fr 1fr">
       <tc:style height="400px"/>
       <tc:button label="Button"/>
       <tc:button label="Button"/>
@@ -80,10 +80,10 @@
 
   <tc:section label="Cascade">
     <p>You can also put a flex layout within a flex layout. In this case the second row is another flex layout.</p>
-    <tc:flexLayout rows="100px;auto;80px;1*">
+    <tc:flexLayout rows="100px auto 80px 1fr">
       <tc:style height="400px"/>
       <tc:button label="Button"/>
-      <tc:flexLayout columns="200px;auto;1*;2*;1*">
+      <tc:flexLayout columns="200px auto 1fr 2fr 1fr">
         <tc:button label="Button"/>
         <tc:button label="Button"/>
         <tc:button label="Button"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/30-segment/segment-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/30-segment/segment-layout.xhtml
index 462b882..9106a72 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/30-segment/segment-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/30-segment/segment-layout.xhtml
@@ -58,9 +58,9 @@
         <tc:in value="4"/>
       </tc:segmentLayout>
     </tc:section>
-    <tc:section label="'auto' and '*'">
-      <pre><code class="language-markup">&lt;tc:segmentLayout extraSmall="* auto *"></code></pre>
-      <tc:segmentLayout extraSmall="* auto *">
+    <tc:section label="'auto' and 'fr'">
+      <pre><code class="language-markup">&lt;tc:segmentLayout extraSmall="1fr auto 1fr"></code></pre>
+      <tc:segmentLayout extraSmall="1fr auto 1fr">
         <tc:panel>
           <tc:style customClass="blue"/>
           <p>the remaining space</p>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/grid-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/grid-layout.xhtml
index 7a849e1..a808273 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/grid-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/grid-layout.xhtml
@@ -41,7 +41,7 @@
   </p>
 
   <tc:box label="Personal Information">
-    <tc:gridLayout columns="*;2*" rows="auto;auto;auto;auto;auto;*">
+    <tc:gridLayout columns="1fr 2fr" rows="auto auto auto auto auto 1fr">
       <tc:style minHeight="600px"/>
 
       <tc:selectOneChoice label="Salutation">
@@ -71,7 +71,7 @@
   </tc:box>
 
   <tc:box label="2-dimensional layout">
-    <tc:gridLayout columns="*;2*;*" rows="*;2*;*">
+    <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr">
       <tc:style minHeight="600px"/>
 
       <tc:box label="#1">
@@ -99,7 +99,7 @@
   </tc:box>
 
   <tc:box label="ordering/positioning of the components">
-    <tc:gridLayout columns="*;2*;*" rows="*;2*;*">
+    <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr">
       <tc:style minHeight="600px"/>
 
       <tc:box label="#1">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/60-split/split-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/60-split/split-layout.xhtml
index 9c8157e..eacfd55 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/60-split/split-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/60-split/split-layout.xhtml
@@ -28,7 +28,7 @@
   <p><span class="#{demo:bootstrapClass('BADGE')} #{demo:bootstrapClass('BADGE_DANGER')}">Warning!</span>
   Preliminary implementation, work in progress!</p>
 
-  <tc:splitLayout columns="2fr;1fr;1fr">
+  <tc:splitLayout columns="2fr 1fr 1fr">
     <tc:panel>
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
         et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
@@ -41,13 +41,13 @@
 <!--    <tc:textarea value="Text 2" labelLayout="none"/> -->
   </tc:splitLayout>
 
-  <tc:splitLayout columns="1*;4*;1*">
+  <tc:splitLayout columns="1fr 4fr 1fr">
     <tc:button label="A"/>
     <tc:button label="B"/>
     <!--<tc:button label="C"/>-->
   </tc:splitLayout>
 
-  <tc:flexLayout rows="auto;*">
+  <tc:flexLayout rows="auto 1fr">
 
     <p>
     The SplitLayout implements a two component layout with a divider between
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/layout.xhtml
index 5081e5c..6e0ace1 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/layout.xhtml
@@ -35,7 +35,7 @@
   </tc:section>
 
   <tc:section label="#{demoBundle.flex_layout}">
-    <tc:flexLayout columns="200px;auto;1*;3*;1*">
+    <tc:flexLayout columns="200px auto 1fr 3fr 1fr">
       <tc:button label="Button"/>
       <tc:button label="Button"/>
       <tc:button label="Button"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/21-error/error.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/21-error/error.xhtml
index 2bdd707..e9f13fd 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/21-error/error.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/21-error/error.xhtml
@@ -23,7 +23,7 @@
 
   <ui:param name="title" value="Sample Error Scenarios (Todo: is to be optimized) "/>
 
-  <tc:gridLayout rows="35px;35px;35px;35px" columns="100px;*">
+  <tc:gridLayout rows="35px 35px 35px 35px" columns="100px 1fr">
 
     <tc:flowLayout>
       <tc:span column="2"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/50-partial/partial.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/50-partial/partial.xhtml
index 26b7f56..c4c39f6 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/50-partial/partial.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/50-partial/partial.xhtml
@@ -23,15 +23,15 @@
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns="http://www.w3.org/1999/xhtml">
   <ui:param name="title" value="Partial Update (AJAX)"/>
-  <tc:gridLayout id="parent" rows="20px;200px;*;auto">
+  <tc:gridLayout id="parent" rows="20px 200px 1fr auto">
 
     <tc:out value="Demonstration and test of partial reload"/>
 
     <tc:style file="content/50-partial/partial.css"/>
 
-    <tc:gridLayout columns="1*;1*">
+    <tc:gridLayout columns="1fr 1fr">
       <tc:box label="Left panel" id="left">
-        <tc:gridLayout rows="auto;*">
+        <tc:gridLayout rows="auto 1fr">
           <tc:label value="Current seconds on server: "/>
           <tc:out value="#{partialReloadController.currentDate}" markup="demoSeconds">
             <f:convertDateTime pattern="ss:SSS"/>
@@ -39,7 +39,7 @@
         </tc:gridLayout>
       </tc:box>
       <tc:box label="Right panel" id="right">
-        <tc:gridLayout rows="auto;*">
+        <tc:gridLayout rows="auto 1fr">
           <tc:label value="Current seconds on server: "/>
           <tc:out value="#{partialReloadController.currentDate}" markup="demoSeconds">
             <f:convertDateTime pattern="ss:SSS"/>
@@ -63,11 +63,11 @@
       </ul>
     </tc:flowLayout>
 
-    <tc:gridLayout columns="*;205px;*">
+    <tc:gridLayout columns="1fr 205px 1fr">
 
       <tc:panel/>
 
-      <tc:gridLayout columns="*;*" rows="auto;auto;auto;auto;auto;auto;auto;auto">
+      <tc:gridLayout columns="1fr 1fr" rows="auto auto auto auto auto auto auto auto">
 
         <tc:button label="Reload left" tip="Reload left side box"
                    action="#{partialReloadController.reload}">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/35-deprecated/70-grid-layout/grid-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/35-deprecated/70-grid-layout/grid-layout.xhtml
index 42e2fbd..1d4bcb0 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/35-deprecated/70-grid-layout/grid-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/35-deprecated/70-grid-layout/grid-layout.xhtml
@@ -38,7 +38,7 @@
 
   <tc:section label="GridLayout">
     <tc:box label="Personal Information">
-      <tc:gridLayout columns="*;*" rows="auto;auto;auto;auto;auto;*">
+      <tc:gridLayout columns="1fr 1fr" rows="auto auto auto auto auto 1fr">
         <tc:selectOneChoice label="Salutation">
           <f:selectItem itemLabel="none"/>
           <f:selectItem itemLabel="Mr."/>
@@ -68,7 +68,7 @@
 
   <tc:section label="FlexLayout">
     <tc:box label="Personal Information">
-      <tc:flexLayout rows="auto;auto">
+      <tc:flexLayout rows="auto auto">
         <tc:flexLayout columns="auto">
           <tc:selectOneChoice label="Salutation">
             <f:selectItem itemLabel="none"/>
@@ -77,19 +77,19 @@
           </tc:selectOneChoice>
         </tc:flexLayout>
 
-        <tc:flexLayout columns="1;1">
+        <tc:flexLayout columns="1 1">
           <tc:in label="First Name"/>
           <tc:in label="Last Name"/>
         </tc:flexLayout>
 
         <tc:in label="c/o"/>
 
-        <tc:flexLayout columns="1;1">
+        <tc:flexLayout columns="1 1">
           <tc:in label="Street"/>
           <tc:in label="No"/>
         </tc:flexLayout>
 
-        <tc:flexLayout columns="1;1">
+        <tc:flexLayout columns="1 1">
           <tc:in label="ZIP"/>
           <tc:in label="City"/>
         </tc:flexLayout>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/2000-selectItem/type-of-literals.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/2000-selectItem/type-of-literals.xhtml
index ad59b76..8c59f37 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/2000-selectItem/type-of-literals.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/2000-selectItem/type-of-literals.xhtml
@@ -21,7 +21,7 @@
     xmlns:f="http://java.sun.com/jsf/core">
 
   <tc:page width="700px" height="600px">
-    <tc:gridLayout columns="4*;*">
+    <tc:gridLayout columns="4fr 1fr">
 
       <tc:panel>
         <tc:span column="2"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/3000-sheet/10-sheet-types/sheet-types.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/3000-sheet/10-sheet-types/sheet-types.xhtml
index 8b54ab5..2a2d541 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/3000-sheet/10-sheet-types/sheet-types.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/3000-sheet/10-sheet-types/sheet-types.xhtml
@@ -23,7 +23,7 @@
                 xmlns:ui="http://java.sun.com/jsf/facelets">
   <ui:param name="title" value="#{demoBundle.sheet_types}"/>
   <tc:sheet value="#{sheetController.solarList}" id="sheet" var="luminary"
-            columns="50px;70px;70px;10px;90px;160px;100px;70px;180px;90px;130px"
+            columns="50px 70px 70px 10px 90px 160px 100px 70px 180px 90px 130px"
             rows="10">
     <tc:columnSelector/>
     <tc:column label="&lt;tc:out>" id="c_out">
@@ -60,7 +60,7 @@
       </tc:image>
     </tc:column>
     <tc:column label="&lt;tc:flexLayout>" id="c_panel">
-      <tc:flexLayout columns="1*;10px;1*">
+      <tc:flexLayout columns="1fr 10px 1fr">
         <tc:in value="1st" labelLayout="skip"/>
         <tc:out value="/" labelLayout="skip"/>
         <tc:in value="2nd" labelLayout="skip"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4700-flexLayout/x-template.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4700-flexLayout/x-template.xhtml
index 06ad140..0250d5d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4700-flexLayout/x-template.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4700-flexLayout/x-template.xhtml
@@ -24,7 +24,7 @@
   <f:view locale="#{localeController.locale}">
     <tc:page label="flex layout template" id="page">
 
-      <tc:flexLayout columns="3*;2*;1*">
+      <tc:flexLayout columns="3fr 2fr 1fr">
 
         <ui:insert name="x-textarea-1">
           Default
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/60000-manual/4000-button+link/button+link.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/60000-manual/4000-button+link/button+link.xhtml
index 48c8e40..1250eac 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/60000-manual/4000-button+link/button+link.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/60000-manual/4000-button+link/button+link.xhtml
@@ -25,12 +25,12 @@
     <p>The left link is rendered as a <code>&lt;button></code>, the right side is rendered as an <code>&lt;a></code>.
       Both representations have to be similar.</p>
     <tc:segmentLayout extraSmall="6;6">
-      <tc:flexLayout columns="auto;auto" id="fl1">
+      <tc:flexLayout columns="auto auto" id="fl1">
         <tc:in id="action"/>
         <tc:link label="actionLink" action="#{buttonLinkController.linkToComponentsRoot}"/>
       </tc:flexLayout>
 
-      <tc:flexLayout columns="auto;auto" id="fl2">
+      <tc:flexLayout columns="auto auto" id="fl2">
         <tc:out label="label" value="value"/>
         <tc:in id="href"/>
         <tc:link label="hrefLink" link="https://www.apache.com/"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/7000-layout/markup-spread-flex.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/7000-layout/markup-spread-flex.xhtml
index ee0c3f3..44cbf1b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/7000-layout/markup-spread-flex.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/7000-layout/markup-spread-flex.xhtml
@@ -22,7 +22,7 @@
         xmlns:tc="http://myfaces.apache.org/tobago/component">
   <tc:page markup="spread" label="Test" id="page">
 
-    <tc:flexLayout rows="1;1">
+    <tc:flexLayout rows="1 1">
       <tc:style height="100%"/>
 
       <tc:box label="Box 1">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/7000-layout/markup-spread-grid.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/7000-layout/markup-spread-grid.xhtml
index 3c88127..23e906d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/7000-layout/markup-spread-grid.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/7000-layout/markup-spread-grid.xhtml
@@ -22,7 +22,7 @@
         xmlns:tc="http://myfaces.apache.org/tobago/component">
   <tc:page markup="spread" label="Test" id="page">
 
-    <tc:gridLayout rows="1*;1*">
+    <tc:gridLayout rows="1fr 1fr">
       <tc:style height="100%"/>
 
       <tc:box label="Box 1">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/attribute.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/attribute.xhtml
index 6e226f9..b25ee3f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/attribute.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/attribute.xhtml
@@ -25,14 +25,14 @@
 
   <tc:page>
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;auto;auto;auto;auto;*" columns="250px;*"/>
+      <tc:gridLayout rows="auto auto auto auto auto auto 1fr" columns="250px 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
 
     <tc:label value="condition"/>
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*"/>
+        <tc:gridLayout columns="1fr 1fr"/>
       </f:facet>
       <tc:selectBooleanCheckbox value="#{attribute.condition}"/>
       <tc:button label="update"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/mode-valueIfSet.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/mode-valueIfSet.xhtml
index 93122c5..d3ffa9c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/mode-valueIfSet.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/mode-valueIfSet.xhtml
@@ -33,7 +33,7 @@
 
     <tc:box label="value">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;auto;auto;auto;auto;auto;*" columns="250px;*"/>
+        <tc:gridLayout rows="auto auto auto auto auto auto 1fr" columns="250px 1fr"/>
       </f:facet>
 
       <tc:label value="value"/>
@@ -74,7 +74,7 @@
 
     <tc:box label="id" id="id-box">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;auto;auto;auto;auto;auto;*" columns="250px;*"/>
+        <tc:gridLayout rows="auto auto auto auto auto auto 1fr" columns="250px 1fr"/>
       </f:facet>
 
       <tc:label value="id"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/popup-modal.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/popup-modal.xhtml
index c7b71ff..a18c8ea 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/popup-modal.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/attribute/popup-modal.xhtml
@@ -25,7 +25,7 @@
   <tc:page>
 
     <f:facet name="layout">
-      <tc:gridLayout columns="300px" rows="auto;auto;auto;auto;auto;auto;auto"/>
+      <tc:gridLayout columns="300px" rows="auto auto auto auto auto auto auto"/>
     </f:facet>
 
     <test:popup id="d" label="modal: default"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/3x3-center.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/3x3-center.xhtml
index 788da9c..bc48762 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/3x3-center.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/3x3-center.xhtml
@@ -23,7 +23,7 @@
 
   <tc:page id="page">
     <tc:style width="300px" height="300px"/>
-    <tc:gridLayout rows="*;100px;*" columns="*;100px;*">
+    <tc:gridLayout rows="1fr 100px 1fr" columns="1fr 100px 1fr">
 
 
       <tc:panel>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/position-4x4-span-steps.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/position-4x4-span-steps.xhtml
index 60b78c3..74cb50c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/position-4x4-span-steps.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/position-4x4-span-steps.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="6*;9*;13*;2*" rows="4*;11*;10*;5*"/>
+      <tc:gridLayout columns="6fr 9fr 13fr 2fr" rows="4fr 11fr 10fr 5fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="315px" height="315px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/subview.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/subview.xhtml
index 00973e3..d1ea639 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/subview.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/cell/subview.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="*;auto"/>
+      <tc:gridLayout rows="1fr auto"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="100px" height="310px"/> -->
 
@@ -33,7 +33,7 @@
       <f:subview id="subview">
         <tc:panel>
           <f:facet name="layout">
-            <tc:gridLayout rows="100px;100px"/>
+            <tc:gridLayout rows="100px 100px"/>
           </f:facet>
 
           <tc:image id="i-2" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date-layout.xhtml
index 8641813..91b8f3f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date-tobago-1105.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date-tobago-1105.xhtml
index 4b663ab..02971f7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date-tobago-1105.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date-tobago-1105.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <tc:box>
       <f:facet name="layout">
-        <tc:gridLayout columns="2*;*" rows="auto;auto;auto;auto;auto"/>
+        <tc:gridLayout columns="2fr 1fr" rows="auto auto auto auto auto"/>
       </f:facet>
       <!-- <tc:gridLayoutConstraint width="900px" height="300px" marginLeft="10px" marginTop="10px" marginRight="10px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date.xhtml
index 9d9bd87..d8fbafe 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/date.xhtml
@@ -25,7 +25,7 @@
   <tc:page>
     <tc:box>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;*" rows="auto;auto;auto;auto;auto;auto;auto;auto;*;auto"/>
+        <tc:gridLayout columns="1fr 1fr 1fr" rows="auto auto auto auto auto auto auto auto 1fr auto"/>
       </f:facet>
       <!-- <tc:gridLayoutConstraint width="900px" height="300px" marginLeft="10px" marginTop="10px" marginRight="10px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/datetime.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/datetime.xhtml
index 519a6a9..ff6de80 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/datetime.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/date/datetime.xhtml
@@ -28,8 +28,8 @@
 
 <tc:panel id="jquery_date_time_pattern">
 <f:facet name="layout">
-  <tc:gridLayout columns="2*;2*;2*;*;*;2*;2*"
-                 rows="auto;60px;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+  <tc:gridLayout columns="2fr 2fr 2fr 1fr 1fr 2fr 2fr"
+                 rows="auto 60px auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto"/>
 </f:facet>
 
 <tc:label value="Name"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/error/display-exception.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/error/display-exception.xhtml
index 4b07977..b85ccec 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/error/display-exception.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/error/display-exception.xhtml
@@ -27,7 +27,7 @@
 
     <tc:box label="An Exception has occured">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;*"/>
+        <tc:gridLayout rows="auto 1fr"/>
       </f:facet>
 
       <tc:messages/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/error/throw-exception.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/error/throw-exception.xhtml
index 7f4611a..8562bc1 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/error/throw-exception.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/error/throw-exception.xhtml
@@ -27,7 +27,7 @@
 
     <tc:box label="Error Test">
       <f:facet name="layout">
-        <tc:gridLayout rows="100px;auto"/>
+        <tc:gridLayout rows="100px auto"/>
       </f:facet>
 
       <tc:panel>
@@ -36,7 +36,7 @@
 
       <tc:panel>
         <f:facet name="layout">
-          <tc:gridLayout columns="*;auto"/>
+          <tc:gridLayout columns="1fr auto"/>
         </f:facet>
 
         <tc:panel/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/file/file-markup.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/file/file-markup.xhtml
index 8f77d32..6f51296 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/file/file-markup.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/file/file-markup.xhtml
@@ -23,7 +23,7 @@
 
   <tc:page>
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+      <tc:gridLayout rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-horizontal.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-horizontal.xhtml
index e7bd4c0..012a3c9 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-horizontal.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-horizontal.xhtml
@@ -22,12 +22,12 @@
     xmlns:f="http://java.sun.com/jsf/core">
 
   <tc:page id="page">
-    <tc:flexLayout columns="*;auto;100px;2*">
+    <tc:flexLayout columns="1fr auto 100px 2fr">
 
-      <tc:textarea value="Left 1*"/>
+      <tc:textarea value="Left 1fr"/>
       <tc:image value="pidgeon-point.jpg"/>
       <tc:textarea value="100px"/>
-      <tc:textarea value="Right 2*"/>
+      <tc:textarea value="Right 2fr"/>
 
     </tc:flexLayout>
   </tc:page>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-simple.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-simple.xhtml
index 1a635b1..5eaaa74 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-simple.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-simple.xhtml
@@ -22,7 +22,7 @@
     xmlns:f="http://java.sun.com/jsf/core">
 
   <tc:page id="page">
-    <tc:flexLayout columns="*;2*">
+    <tc:flexLayout columns="1fr 2fr">
       <tc:textarea value="Left"/>
       <tc:textarea value="Right"/>
     </tc:flexLayout>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-vertical.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-vertical.xhtml
index 0e049b3..9b23b73 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-vertical.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flexLayout/flexLayout-vertical.xhtml
@@ -24,12 +24,12 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint height="500px"/> -->
 
-    <tc:flexLayout rows="*;auto;100px;2*">
+    <tc:flexLayout rows="1fr auto 100px 2fr">
 
-      <tc:textarea value="Top 1*"/>
+      <tc:textarea value="Top 1fr"/>
       <tc:image value="pidgeon-point.jpg"/>
       <tc:textarea value="100px"/>
-      <tc:textarea value="Bottom 2*"/>
+      <tc:textarea value="Bottom 2fr"/>
 
     </tc:flexLayout>
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flowLayout/flowLayout-textAlign.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flowLayout/flowLayout-textAlign.xhtml
index c32448c..9ed29b4 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flowLayout/flowLayout-textAlign.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/flowLayout/flowLayout-textAlign.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="20px;auto;20px;auto;20px;auto;60px;"/>
+      <tc:gridLayout rows="20px auto 20px auto 20px auto 60px;"/>
     </f:facet>
 
     <tc:flowLayout textAlign="left">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/dynamic-include.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/dynamic-include.xhtml
index 2c20c2e..d74e168 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/dynamic-include.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/dynamic-include.xhtml
@@ -28,7 +28,7 @@
   <tc:page width="800px" height="800px" label="Dynamic Include">
     <tc:box label="Dynamic Included Panels">
       <f:facet name="layout">
-        <tc:gridLayout margin="10px" columns="500px" rows="100px;auto;auto;auto;auto;auto"/>
+        <tc:gridLayout margin="10px" columns="500px" rows="100px auto auto auto auto auto"/>
       </f:facet>
       <tc:panel>
         <p>
@@ -51,7 +51,7 @@
       </c:forEach>
       <tc:panel>
         <f:facet name="layout">
-          <tc:gridLayout columns="100px;100px;*" rows="auto"/>
+          <tc:gridLayout columns="100px 100px 1fr" rows="auto"/>
         </f:facet>
         <tc:button label="Next" action="#{dynamic.addPanel}"/>
         <tc:button label="Reset" immediate="true" action="#{dynamic.reset}"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-one-fragment.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-one-fragment.xhtml
index e1f2214..761ee5c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-one-fragment.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-one-fragment.xhtml
@@ -25,7 +25,7 @@
 
   <tc:panel>
     <f:facet name="layout">
-      <tc:gridLayout margin="10px" columns="500px" rows="auto;auto"/>
+      <tc:gridLayout margin="10px" columns="500px" rows="auto auto"/>
     </f:facet>
     <tc:separator label="Panel One"/>
     <tc:in label="Value One" value="#{panel1.value}" />
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-three-fragment.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-three-fragment.xhtml
index 06c4c59..2a46c0f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-three-fragment.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-three-fragment.xhtml
@@ -25,7 +25,7 @@
 
   <tc:panel>
     <f:facet name="layout">
-      <tc:gridLayout margin="10px" columns="500px" rows="auto;auto"/>
+      <tc:gridLayout margin="10px" columns="500px" rows="auto auto"/>
     </f:facet>
     <tc:separator label="Panel Three"/>
     <tc:in label="Street" value="#{panel3.street}" />
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-two-fragment.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-two-fragment.xhtml
index 9aa0318..40f8f78 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-two-fragment.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/forEach/panel-two-fragment.xhtml
@@ -25,7 +25,7 @@
 
   <tc:panel>
     <f:facet name="layout">
-      <tc:gridLayout margin="10px" columns="500px" rows="auto;auto"/>
+      <tc:gridLayout margin="10px" columns="500px" rows="auto auto"/>
     </f:facet>
     <tc:separator label="Panel Two"/>
     <tc:in label="First Name" value="#{panel2.firstName}" />
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/auto-vertical-in+in.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/auto-vertical-in+in.xhtml
index ac185db..43fc5ed 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/auto-vertical-in+in.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/auto-vertical-in+in.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;*"/>
+      <tc:gridLayout rows="auto auto 1fr"/>
     </f:facet>
 
     <tc:in id="in-0" value="0">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/horizontal-600px-asterisk-default.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/horizontal-600px-asterisk-default.xhtml
index e7e64a1..59fa725 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/horizontal-600px-asterisk-default.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/horizontal-600px-asterisk-default.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*"/>
+      <tc:gridLayout columns="1fr"/>
     </f:facet>
 
     <tc:in id="in" value="Width should be 600px"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-4.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-4.xhtml
index b75f24c..5c9bc98 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-4.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-4.xhtml
@@ -25,12 +25,12 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="220px" height="220px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" rows="*;*" columnSpacing="20px" rowSpacing="20px"/>
+      <tc:gridLayout columns="1fr 1fr" rows="1fr 1fr" columnSpacing="20px" rowSpacing="20px"/>
     </f:facet>
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*" rows="*"/>
+        <tc:gridLayout columns="1fr" rows="1fr"/>
       </f:facet>
 
       <tc:image id="image-1" value="pidgeon-point.jpg"/>
@@ -39,7 +39,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*" rows="*"/>
+        <tc:gridLayout columns="1fr" rows="1fr"/>
       </f:facet>
 
       <tc:image id="image-2" value="pidgeon-point.jpg"/>
@@ -48,7 +48,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*" rows="*"/>
+        <tc:gridLayout columns="1fr" rows="1fr"/>
       </f:facet>
 
       <tc:image id="image-3" value="pidgeon-point.jpg"/>
@@ -57,7 +57,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*" rows="*;*"/>
+        <tc:gridLayout columns="1fr" rows="1fr 1fr"/>
       </f:facet>
 
       <tc:image id="image-41" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-simple.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-simple.xhtml
index 87abed8..ff7d82b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-simple.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-simple.xhtml
@@ -25,12 +25,12 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="120px" height="180px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*" rows="*"/>
+      <tc:gridLayout columns="1fr" rows="1fr"/>
     </f:facet>
 
     <tc:panel id="panel">
       <f:facet name="layout">
-        <tc:gridLayout columns="*" rows="*"/>
+        <tc:gridLayout columns="1fr" rows="1fr"/>
       </f:facet>
 
       <tc:image id="image" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-v.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-v.xhtml
index a7b0f59..e193ef4 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-v.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested-v.xhtml
@@ -26,14 +26,14 @@
     <!-- <tc:gridLayoutConstraint width="500px" height="500px"/> -->
 
       <f:facet name="layout">
-        <tc:gridLayout id="page-grid" rows="*;auto"/>
+        <tc:gridLayout id="page-grid" rows="1fr auto"/>
       </f:facet>
 
       <tc:textarea id="textarea"/>
 
       <tc:panel id="panel">
         <f:facet name="layout">
-          <tc:gridLayout id="panel-grid" columns="*;100px"/>
+          <tc:gridLayout id="panel-grid" columns="1fr 100px"/>
         </f:facet>
         <tc:panel id="cell"/>
         <tc:button id="button" label="Submit"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested.xhtml
index cce8e9e..eab251f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/nested.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="100px;205px;*;2*" rows="*;*;*"/>
+      <tc:gridLayout columns="100px 205px 1fr 2fr" rows="1fr 1fr 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="650px" height="310px"/> -->
 
@@ -41,7 +41,7 @@
     <tc:panel id="x_14">
       <!-- <tc:gridLayoutConstraint rowSpan="2"/> -->
       <f:facet name="layout">
-        <tc:gridLayout columns="130px;*"/>
+        <tc:gridLayout columns="130px 1fr"/>
       </f:facet>
       <tc:image id="x_14_a" value="pidgeon-point.jpg"/>
       <tc:image id="x_14_b" value="pidgeon-point.jpg"/>
@@ -49,7 +49,7 @@
 
     <tc:panel id="x_7">
       <f:facet name="layout">
-        <tc:gridLayout columns="*;2*"/>
+        <tc:gridLayout columns="1fr 2fr"/>
       </f:facet>
       <tc:image id="x_7_a" value="pidgeon-point.jpg"/>
       <tc:image id="x_7_b" value="pidgeon-point.jpg"/>
@@ -57,7 +57,7 @@
 
     <tc:panel id="x_10">
       <f:facet name="layout">
-        <tc:gridLayout columns="4*;*"/>
+        <tc:gridLayout columns="4fr 1fr"/>
       </f:facet>
       <tc:image id="x_10_a" value="pidgeon-point.jpg"/>
       <tc:image id="x_10_b" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/not-exact-4x4.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/not-exact-4x4.xhtml
index 841edcb..9a33752 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/not-exact-4x4.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/not-exact-4x4.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="6*;9*;13*;2*" rows="4*;11*;10*;5*"/>
+      <tc:gridLayout columns="6fr 9fr 13fr 2fr" rows="4fr 11fr 10fr 5fr"/>
     </f:facet>
     <!-- 211 (prime number) + 15px = 226px -->
     <!-- <tc:gridLayoutConstraint width="226px" height="226px"/> -->
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/not-exact.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/not-exact.xhtml
index 46515c7..c73b510 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/not-exact.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/not-exact.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" columnSpacing="0px"/>
+      <tc:gridLayout columns="1fr 1fr" columnSpacing="0px"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="201px" height="200px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-1+1x1-span.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-1+1x1-span.xhtml
index 5f5e503..6a21f0f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-1+1x1-span.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-1+1x1-span.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="*" columns="*;*;*"/>
+      <tc:gridLayout rows="1fr" columns="1fr 1fr 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="610px" height="300px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-10x10-span.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-10x10-span.xhtml
index a177ed6..df84645 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-10x10-span.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-10x10-span.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="*;*;*;*;*;*;*;*;*;*" columns="*;*;*;*;*;*;*;*;*;*"/>
+      <tc:gridLayout rows="1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr" columns="1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="1045px" height="1045px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-out.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-out.xhtml
index 34e19a1..8e5b677 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-out.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-out.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-bottom.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-bottom.xhtml
index 2f7d1b4..8af3c0a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-bottom.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-bottom.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-left.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-left.xhtml
index 95103d5..ec0280d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-left.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-left.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-right.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-right.xhtml
index 514393d..f8af2ba 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-right.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-right.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-top.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-top.xhtml
index 2984d6c..65797fc 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-top.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2-span-top.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2.xhtml
index 64ce54c..7e7c284 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-2x2.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*" columnSpacing="0px" rowSpacing="0px"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr" columnSpacing="0px" rowSpacing="0px"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-4x4-span-steps.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-4x4-span-steps.xhtml
index 628d619..b72a11c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-4x4-span-steps.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/position-4x4-span-steps.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="6*;9*;13*;2*" rows="4*;11*;10*;5*"/>
+      <tc:gridLayout columns="6fr 9fr 13fr 2fr" rows="4fr 11fr 10fr 5fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="315px" height="315px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/proportion-versus-minimum.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/proportion-versus-minimum.xhtml
index dd70fd3..103198a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/proportion-versus-minimum.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/proportion-versus-minimum.xhtml
@@ -26,7 +26,7 @@
     <!-- todo: support the automatical computed width of the scrollbar -->
     <!-- <tc:gridLayoutConstraint width="320px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="100px;auto;*;*" columns="300px"/>
+      <tc:gridLayout rows="100px auto 1fr 1fr" columns="300px"/>
     </f:facet>
 
     <tc:textarea
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-1-cannot-match.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-1-cannot-match.xhtml
index 10243d3..b221719 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-1-cannot-match.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-1-cannot-match.xhtml
@@ -25,16 +25,16 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="1000px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;*" rows="20px;100px;100px;100px;*"/>
+      <tc:gridLayout columns="auto 1fr" rows="20px 100px 100px 100px 1fr"/>
     </f:facet>
 
     <tc:label value="one column with 'auto'"/>
 
-    <tc:label value="one column with '*'"/> 
+    <tc:label value="one column with '1fr'"/>
 
     <tc:panel id="panel">
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;auto"/>
+        <tc:gridLayout columns="1fr 1fr auto"/>
       </f:facet>
 
       <tc:textarea id="a1" value="50/100/150">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-1.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-1.xhtml
index 7eab144..60196dd 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-1.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-1.xhtml
@@ -25,16 +25,16 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="1000px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;*" rows="20px;100px;100px;100px;*"/>
+      <tc:gridLayout columns="auto 1fr" rows="20px 100px 100px 100px 1fr"/>
     </f:facet>
 
     <tc:label value="one column with 'auto'"/>
 
-    <tc:label value="one column with '*'"/> 
+    <tc:label value="one column with '1fr'"/>
 
     <tc:panel id="panel">
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;auto"/>
+        <tc:gridLayout columns="1fr 1fr auto"/>
       </f:facet>
 
       <tc:textarea id="a1" value="50/100/150">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-3.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-3.xhtml
index 1eed832..209c1b9 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-3.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-1-3.xhtml
@@ -25,16 +25,16 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="1000px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;*" rows="20px;100px;100px;100px;*"/>
+      <tc:gridLayout columns="auto 1fr" rows="20px 100px 100px 100px 1fr"/>
     </f:facet>
 
     <tc:label value="one column with 'auto'"/>
 
-    <tc:label value="one column with '*'"/> 
+    <tc:label value="one column with '1fr'"/>
 
     <tc:panel id="panel">
       <f:facet name="layout">
-        <tc:gridLayout columns="*;3*;auto"/>
+        <tc:gridLayout columns="1fr 3fr auto"/>
       </f:facet>
 
       <tc:textarea id="a1" value="100/200/300">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-2-columns.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-2-columns.xhtml
index 8924811..0736c93 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-2-columns.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-2-columns.xhtml
@@ -29,7 +29,7 @@
 
     <tc:panel id="panel">
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*"/>
+        <tc:gridLayout columns="1fr 1fr"/>
       </f:facet>
 
       <tc:textarea id="a1">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-2-rows.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-2-rows.xhtml
index 668aa77..d42cea4 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-2-rows.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/relative-inside-auto-2-rows.xhtml
@@ -29,7 +29,7 @@
 
     <tc:panel id="panel">
       <f:facet name="layout">
-        <tc:gridLayout rows="*;*"/>
+        <tc:gridLayout rows="1fr 1fr"/>
       </f:facet>
 
       <tc:textarea id="a1">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-1.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-1.xhtml
index e819ed2..af935a5 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-1.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-1.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto" columns="auto;auto"/>
+      <tc:gridLayout rows="auto auto" columns="auto auto"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-2.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-2.xhtml
index ce9bec8..bee8dcd 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-2.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-2.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto" columns="auto;auto"/>
+      <tc:gridLayout rows="auto auto" columns="auto auto"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-3.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-3.xhtml
index 8ad29dc..2899196 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-3.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-3.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto" columns="auto;auto"/>
+      <tc:gridLayout rows="auto auto" columns="auto auto"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-4.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-4.xhtml
index 1b6eef6..852cf63 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-4.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-auto-2x2-all-but-4.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto" columns="auto;auto"/>
+      <tc:gridLayout rows="auto auto" columns="auto auto"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-combinations.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-combinations.xhtml
index aa6bad3..f572312 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-combinations.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-combinations.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="700px" height="310px"/> -->
     <f:facet name="layout">
       <tc:gridLayout
-          columns="auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+          columns="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto"/>
     </f:facet>
 
     <!--
@@ -36,137 +36,137 @@
     -->
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;100px;100px"/>
+      <ui:param name="rows" value="100px 100px 100px"/>
       <ui:param name="subid" value="sub-01"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;100px;auto"/>
+      <ui:param name="rows" value="100px 100px auto"/>
       <ui:param name="subid" value="sub-02"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;100px;*"/>
+      <ui:param name="rows" value="100px 100px 1fr"/>
       <ui:param name="subid" value="sub-03"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;auto;100px"/>
+      <ui:param name="rows" value="100px auto 100px"/>
       <ui:param name="subid" value="sub-04"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;auto;auto"/>
+      <ui:param name="rows" value="100px auto auto"/>
       <ui:param name="subid" value="sub-05"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;auto;*"/>
+      <ui:param name="rows" value="100px auto 1fr"/>
       <ui:param name="subid" value="sub-06"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;*;100px"/>
+      <ui:param name="rows" value="100px 1fr 100px"/>
       <ui:param name="subid" value="sub-07"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;*;auto"/>
+      <ui:param name="rows" value="100px 1fr auto"/>
       <ui:param name="subid" value="sub-08"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="100px;*;*"/>
+      <ui:param name="rows" value="100px 1fr 1fr"/>
       <ui:param name="subid" value="sub-09"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;100px;100px"/>
+      <ui:param name="rows" value="auto 100px 100px"/>
       <ui:param name="subid" value="sub-11"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;100px;auto"/>
+      <ui:param name="rows" value="auto 100px auto"/>
       <ui:param name="subid" value="sub-12"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;100px;*"/>
+      <ui:param name="rows" value="auto 100px 1fr"/>
       <ui:param name="subid" value="sub-13"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;auto;100px"/>
+      <ui:param name="rows" value="auto auto 100px"/>
       <ui:param name="subid" value="sub-14"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;auto;auto"/>
+      <ui:param name="rows" value="auto auto auto"/>
       <ui:param name="subid" value="sub-15"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;auto;*"/>
+      <ui:param name="rows" value="auto auto 1fr"/>
       <ui:param name="subid" value="sub-16"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;*;100px"/>
+      <ui:param name="rows" value="auto 1fr 100px"/>
       <ui:param name="subid" value="sub-17"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;*;auto"/>
+      <ui:param name="rows" value="auto 1fr auto"/>
       <ui:param name="subid" value="sub-18"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="auto;*;*"/>
+      <ui:param name="rows" value="auto 1fr 1fr"/>
       <ui:param name="subid" value="sub-19"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;100px;100px"/>
+      <ui:param name="rows" value="1fr 100px 100px"/>
       <ui:param name="subid" value="sub-21"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;100px;auto"/>
+      <ui:param name="rows" value="1fr 100px auto"/>
       <ui:param name="subid" value="sub-22"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;100px;*"/>
+      <ui:param name="rows" value="1fr 100px 1fr"/>
       <ui:param name="subid" value="sub-23"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;auto;100px"/>
+      <ui:param name="rows" value="1fr auto 100px"/>
       <ui:param name="subid" value="sub-24"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;auto;auto"/>
+      <ui:param name="rows" value="1fr auto auto"/>
       <ui:param name="subid" value="sub-25"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;auto;*"/>
+      <ui:param name="rows" value="1fr auto 1fr"/>
       <ui:param name="subid" value="sub-26"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;*;100px"/>
+      <ui:param name="rows" value="1fr 1fr 100px"/>
       <ui:param name="subid" value="sub-27"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;*;auto"/>
+      <ui:param name="rows" value="1fr 1fr auto"/>
       <ui:param name="subid" value="sub-28"/>
     </ui:include>
 
     <ui:include src="rendered-combinations-3-images-fragment.xhtml">
-      <ui:param name="rows" value="*;*;*"/>
+      <ui:param name="rows" value="1fr 1fr 1fr"/>
       <ui:param name="subid" value="sub-29"/>
     </ui:include>
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-1.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-1.xhtml
index 0f975e6..f570f5e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-1.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-1.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="400px;200px" columns="400px;200px"/>
+      <tc:gridLayout rows="400px 200px" columns="400px 200px"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-2.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-2.xhtml
index 3ff11b4..e113389 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-2.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-2.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="400px;200px" columns="400px;200px"/>
+      <tc:gridLayout rows="400px 200px" columns="400px 200px"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-3.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-3.xhtml
index 7fe4e34..2cf203f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-3.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-3.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="400px;200px" columns="400px;200px"/>
+      <tc:gridLayout rows="400px 200px" columns="400px 200px"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-4.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-4.xhtml
index 8612028..743e306 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-4.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-pixel-2x2-all-but-4.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="400px;200px" columns="400px;200px"/>
+      <tc:gridLayout rows="400px 200px" columns="400px 200px"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-1.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-1.xhtml
index 81a9892..2afdb0b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-1.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-1.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-2.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-2.xhtml
index fc0b057..e773f02 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-2.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-2.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-3.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-3.xhtml
index 8399052..e2b2531 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-3.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-3.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-4.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-4.xhtml
index fec6290..53d3b17 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-4.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rendered-prop-2x2-all-but-4.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="605px" height="605px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="2*;*" columns="2*;*"/>
+      <tc:gridLayout rows="2fr 1fr" columns="2fr 1fr"/>
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rigid.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rigid.xhtml
index 733df54..2a1d1db 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rigid.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/rigid.xhtml
@@ -29,12 +29,12 @@
     height = 21 + 5 +  51 + 5 +  51 + 5 +  51 + 5 + 2 = 196
     -->
     <f:facet name="layout">
-      <tc:gridLayout rowSpacing="20px" columns="326px" rows="196px;196px;196px"/>
+      <tc:gridLayout rowSpacing="20px" columns="326px" rows="196px 196px 196px"/>
     </f:facet>
 
     <tc:box label="1. All rendered">
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;*"/>
+        <tc:gridLayout columns="1fr 1fr 1fr"/>
       </f:facet>
 
       <tc:textarea value="1">
@@ -79,7 +79,7 @@
 
     <tc:box label="2. Middle row and column are not rendered.">
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;*"/>
+        <tc:gridLayout columns="1fr 1fr 1fr"/>
       </f:facet>
 
       <tc:textarea value="1">
@@ -109,7 +109,7 @@
 
     <tc:box label="3. Like 2. but rigid='true'">
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;*" rigid="true"/>
+        <tc:gridLayout columns="1fr 1fr 1fr" rigid="true"/>
       </f:facet>
 
       <tc:textarea value="1">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-2-levels.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-2-levels.xhtml
index 075ff55..82cf063 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-2-levels.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-2-levels.xhtml
@@ -27,7 +27,7 @@
     <tc:box label="Scrolling test in a box" id="box">
       <!-- <tc:gridLayoutConstraint width="300px" height="600px"/> -->
       <f:facet name="layout">
-        <tc:gridLayout rows="100px;*"/>
+        <tc:gridLayout rows="100px 1fr"/>
       </f:facet>
 
       <tc:textarea id="text"/>
@@ -35,7 +35,7 @@
 
       <tc:box label="Scrolling test in a box" id="box-2">
         <f:facet name="layout">
-          <tc:gridLayout rows="100px;*"/>
+          <tc:gridLayout rows="100px 1fr"/>
         </f:facet>
 
         <tc:textarea id="text-2"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-box.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-box.xhtml
index 82abf56..c55d32e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-box.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-box.xhtml
@@ -27,7 +27,7 @@
     <tc:box label="Scrolling test in a box" id="box">
       <!-- <tc:gridLayoutConstraint width="300px" height="600px"/> -->
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;auto;auto"/>
+        <tc:gridLayout rows="auto auto auto"/>
       </f:facet>
 
       <tc:image id="image-1" value="pidgeon-point.jpg">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-page.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-page.xhtml
index c9ff95b..a9d078a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-page.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-page.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page" width="300px" height="600px">
     <!-- <tc:gridLayoutConstraint width="300px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;auto"/>
+      <tc:gridLayout rows="auto auto auto"/>
     </f:facet>
 
     <tc:image id="image-1" value="pidgeon-point.jpg">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-panel-with-border.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-panel-with-border.xhtml
index 3bfd399..3aa434d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-panel-with-border.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-panel-with-border.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="300px" height="600px"/> -->
     <tc:panel id="panel">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;auto;auto"/>
+        <tc:gridLayout rows="auto auto auto"/>
       </f:facet>
       <tc:gridLayoutConstraint width="300px" height="600px"
                                borderLeft="10px" borderRight="10px" borderTop="10px" borderBottom="10px"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-panel.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-panel.xhtml
index 65cf4be..0c1f771 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-panel.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-panel.xhtml
@@ -27,7 +27,7 @@
     <tc:panel id="panel">
       <!-- <tc:gridLayoutConstraint width="300px" height="600px"/> -->
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;auto;auto"/>
+        <tc:gridLayout rows="auto auto auto"/>
       </f:facet>
 
       <tc:image id="image-1" value="pidgeon-point.jpg">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-tab.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-tab.xhtml
index 7533113..8ca5dcc 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-tab.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/scrolling-tab.xhtml
@@ -28,7 +28,7 @@
       <tc:tab label="Scrolling test in a tab" id="tab1">
         <!-- <tc:gridLayoutConstraint width="300px" height="600px"/> -->
         <f:facet name="layout">
-          <tc:gridLayout rows="auto;auto;auto"/>
+          <tc:gridLayout rows="auto auto auto"/>
         </f:facet>
 
         <tc:image id="image-1" value="pidgeon-point.jpg">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/size-maximum.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/size-maximum.xhtml
index b464a1c..d49cc38 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/size-maximum.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/size-maximum.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="*" rows="*"/>
+      <tc:gridLayout columns="1fr" rows="1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="200px" height="200px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/size-minimum.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/size-minimum.xhtml
index 227de2e..93a6a3c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/size-minimum.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/size-minimum.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="*" rows="*"/>
+      <tc:gridLayout columns="1fr" rows="1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="200px" height="200px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/spacing-nested.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/spacing-nested.xhtml
index aef53f4..870f4e2 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/spacing-nested.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/spacing-nested.xhtml
@@ -33,12 +33,12 @@
   <tc:page id="page" label="Spacing Test">
     <!-- <tc:gridLayoutConstraint width="670px" height="670px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" rows="*;*" columnSpacing="50px" rowSpacing="50px"/>
+      <tc:gridLayout columns="1fr 1fr" rows="1fr 1fr" columnSpacing="50px" rowSpacing="50px"/>
     </f:facet>
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;*" rows="*;*;*" columnSpacing="5px" rowSpacing="5px"/>
+        <tc:gridLayout columns="1fr 1fr 1fr" rows="1fr 1fr 1fr" columnSpacing="5px" rowSpacing="5px"/>
       </f:facet>
 
       <tc:image id="a_NW" value="pidgeon-point.jpg"/>
@@ -54,7 +54,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;*" rows="*;*;*"/>
+        <tc:gridLayout columns="1fr 1fr 1fr" rows="1fr 1fr 1fr"/>
       </f:facet>
 
       <tc:image id="b_NW" value="pidgeon-point.jpg"/>
@@ -70,7 +70,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*" rows="*;*" columnSpacing="0px"/>
+        <tc:gridLayout columns="1fr 1fr" rows="1fr 1fr" columnSpacing="0px"/>
       </f:facet>
 
       <tc:image id="c_NW" value="pidgeon-point.jpg"/>
@@ -81,7 +81,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*" rows="*;*" rowSpacing="0px"/>
+        <tc:gridLayout columns="1fr 1fr" rows="1fr 1fr" rowSpacing="0px"/>
       </f:facet>
 
       <tc:image id="d_NW" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/spacing-simple.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/spacing-simple.xhtml
index 2000447..2737d0e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/spacing-simple.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/spacing-simple.xhtml
@@ -34,7 +34,7 @@
     <!-- <tc:gridLayoutConstraint width="310px" height="310px"/> -->
 
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" rows="*;*" columnSpacing="0px"/>
+      <tc:gridLayout columns="1fr 1fr" rows="1fr 1fr" columnSpacing="0px"/>
     </f:facet>
 
     <tc:image id="c_NW" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-auto-auto.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-auto-auto.xhtml
index 4b7c396..7c0d593 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-auto-auto.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-auto-auto.xhtml
@@ -30,7 +30,7 @@
     <tc:tabGroup id="tabGroup">
       <tc:tab label="Rows" id="rows">
         <f:facet name="layout">
-          <tc:gridLayout rows="auto;auto"/>
+          <tc:gridLayout rows="auto auto"/>
         </f:facet>
         <tc:textarea id="a-1">
           <!-- <tc:gridLayoutConstraint width="100px" height="50px"/> -->
@@ -41,7 +41,7 @@
       </tc:tab>
       <tc:tab label="Columns" id="columns">
         <f:facet name="layout">
-          <tc:gridLayout columns="auto;auto"/>
+          <tc:gridLayout columns="auto auto"/>
         </f:facet>
         <tc:textarea id="a-3">
           <!-- <tc:gridLayoutConstraint width="100px" height="50px"/> -->
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-auto.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-auto.xhtml
index 4c99eb7..334ce6f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-auto.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-auto.xhtml
@@ -30,7 +30,7 @@
     <tc:tabGroup id="tabGroup">
       <tc:tab label="Rows" id="rows">
         <f:facet name="layout">
-          <tc:gridLayout rows="*;*"/>
+          <tc:gridLayout rows="1fr 1fr"/>
         </f:facet>
         <tc:textarea id="a-1">
           <!-- <tc:gridLayoutConstraint width="100px" height="50px"/> -->
@@ -41,7 +41,7 @@
       </tc:tab>
       <tc:tab label="Columns" id="columns">
         <f:facet name="layout">
-          <tc:gridLayout columns="*;*"/>
+          <tc:gridLayout columns="1fr 1fr"/>
         </f:facet>
         <tc:textarea id="a-3">
           <!-- <tc:gridLayoutConstraint width="100px" height="50px"/> -->
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-relative.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-relative.xhtml
index 78cf285..a35c2fe 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-relative.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tabGroup-relative.xhtml
@@ -28,14 +28,14 @@
     <tc:tabGroup id="tabGroup">
       <tc:tab label="Rows" id="rows">
         <f:facet name="layout">
-          <tc:gridLayout rows="*;*"/>
+          <tc:gridLayout rows="1fr 1fr"/>
         </f:facet>
         <tc:textarea id="a-1" />
         <tc:textarea id="a-2" />
       </tc:tab>
       <tc:tab label="Columns" id="columns">
         <f:facet name="layout">
-          <tc:gridLayout columns="*;*" />
+          <tc:gridLayout columns="1fr 1fr" />
         </f:facet>
         <tc:textarea id="a-3" />
         <tc:textarea id="a-4" />
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tobago-1239.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tobago-1239.xhtml
index 5e5363f..c84b9eb 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tobago-1239.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tobago-1239.xhtml
@@ -30,7 +30,7 @@
 
     <tc:box id="box" label="Testing the Bug TOBAGO-1239 ">
       <f:facet name="layout">
-        <tc:gridLayout rows="50px;50px"/>
+        <tc:gridLayout rows="50px 50px"/>
       </f:facet>
       <tc:textarea id="i1" value="this is rendered"/>
       <tc:textarea id="i2" rendered="false" value="this not"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tobago-1243.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tobago-1243.xhtml
index b597c18..a193690 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tobago-1243.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/tobago-1243.xhtml
@@ -23,7 +23,7 @@
   <tc:page id="page">
 
     <f:facet name="layout">
-      <tc:gridLayout rows="50px;*;*"/>
+      <tc:gridLayout rows="50px 1fr 1fr"/>
     </f:facet>
 
     <tc:out value="Test, if EL bindings to non initialized beans are not called, when rendererd = false."/>
@@ -38,7 +38,7 @@
 
     <tc:box id="box-2" label="A simple box, to test the layout bank assignment">
       <f:facet name="layout">
-        <tc:gridLayout rows="100px;*"/>
+        <tc:gridLayout rows="100px 1fr"/>
       </f:facet>
 
       <tc:textarea value="test 1" id="test-1" rendered="false"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-empty.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-empty.xhtml
index 265ae4f..664b470 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-empty.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-empty.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="100px" height="205px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*" rows="*;*" />
+      <tc:gridLayout columns="1fr" rows="1fr 1fr" />
     </f:facet>
 
   </tc:page>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-horizontal-6.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-horizontal-6.xhtml
index 360fab0..24b7da6 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-horizontal-6.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-horizontal-6.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="310px" height="100px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*;*;*;*;*" rows="*" />
+      <tc:gridLayout columns="1fr 1fr 1fr 1fr 1fr 1fr" rows="1fr" />
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-horizontal.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-horizontal.xhtml
index 01e5276..8881785 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-horizontal.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-horizontal.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="100px" height="100px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" rows="*" />
+      <tc:gridLayout columns="1fr 1fr" rows="1fr" />
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-vertical-6.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-vertical-6.xhtml
index 110c49e..2b9b69d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-vertical-6.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-vertical-6.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="100px" height="310px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*" rows="*;*;*;*;*;*" />
+      <tc:gridLayout columns="1fr" rows="1fr 1fr 1fr 1fr 1fr 1fr" />
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-vertical.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-vertical.xhtml
index 665e543..de97483 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-vertical.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-less-components-vertical.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="100px" height="100px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*" rows="*;*" />
+      <tc:gridLayout columns="1fr" rows="1fr 1fr" />
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-much-components.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-much-components.xhtml
index 814b803..9696bc8 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-much-components.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/gridLayout/too-much-components.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="205px" height="205px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" rows="*" />
+      <tc:gridLayout columns="1fr 1fr" rows="1fr" />
     </f:facet>
 
     <tc:image id="i-0" value="pidgeon-point.jpg"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/image/alphaBlendingBug.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/image/alphaBlendingBug.xhtml
index 5736d91..6222f91 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/image/alphaBlendingBug.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/image/alphaBlendingBug.xhtml
@@ -25,12 +25,12 @@
   <tc:page>
     <!-- <tc:gridLayoutConstraint width="400px" height="400px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" />
+      <tc:gridLayout columns="1fr 1fr" />
     </f:facet>
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout rows="*;*;auto"/>
+        <tc:gridLayout rows="1fr 1fr auto"/>
       </f:facet>
 
       <tc:image value="image/feather-leaf.png"/>
@@ -42,7 +42,7 @@
 
     <tc:panel id="ajax">
       <f:facet name="layout">
-        <tc:gridLayout rows="*;*;auto"/>
+        <tc:gridLayout rows="1fr 1fr auto"/>
       </f:facet>
 
       <tc:image value="image/feather-leaf.png"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/image/disabled.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/image/disabled.xhtml
index cd95838..3bb8ca6 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/image/disabled.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/image/disabled.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page" width="600px" height="600px">
 
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" rows="auto;auto;auto;auto;*"/>
+      <tc:gridLayout columns="1fr 1fr" rows="auto auto auto auto 1fr"/>
     </f:facet>
 
     <tc:label id="label" value="normal"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/id-and-fieldId.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/id-and-fieldId.xhtml
index 7136b58..30e6511 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/id-and-fieldId.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/id-and-fieldId.xhtml
@@ -25,8 +25,8 @@
   <tc:page id="page">
     <f:facet name="layout">
       <tc:gridLayout
-          columns="3*;*;*;*"
-          rows="auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+          columns="3fr 1fr 1fr 1fr"
+          rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="900px" height="700px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/in-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/in-layout.xhtml
index 5fcf93c..de4b4c2 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/in-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/in-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/in-tx.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/in-tx.xhtml
index 6183b98..b67d588 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/in-tx.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/in/in-tx.xhtml
@@ -23,7 +23,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;auto;auto;auto"/>
+      <tc:gridLayout rows="auto auto auto auto auto"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/for-auto.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/for-auto.xhtml
index 8d38dce..ada9d80 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/for-auto.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/for-auto.xhtml
@@ -27,7 +27,7 @@
     </f:facet>
     <tc:box label="Related to TOBAGO-1136: for='@auto' attribute">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+        <tc:gridLayout rows="auto auto auto auto auto auto auto auto auto auto auto auto auto"/>
       </f:facet>
 
       <tc:in label="tx:in" id="in_panel" fieldId="in"/>
@@ -71,7 +71,7 @@
 
       <tc:panel id="tc_in_panel">
         <f:facet name="layout">
-          <tc:gridLayout columns="200px;*"/>
+          <tc:gridLayout columns="200px 1fr"/>
         </f:facet>
 
         <tc:label value="tc:in" for="@auto"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/label-tx.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/label-tx.xhtml
index 516672a..452219f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/label-tx.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/label-tx.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/label.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/label.xhtml
index 8a35a36..383322e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/label.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/label/label.xhtml
@@ -25,7 +25,7 @@
   <tc:page>
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;*" rows="auto"/>
+      <tc:gridLayout columns="auto 1fr" rows="auto"/>
     </f:facet>
 
     <tc:label value="Label"/>
@@ -33,7 +33,7 @@
 
     <tc:panel>
     <f:facet name="layout">
-    <tc:gridLayout columns="170px;1*" rows="50px" border="0" />
+    <tc:gridLayout columns="170px 1fr" rows="50px" border="0" />
     </f:facet>
     <tc:panel>
     <tc:label value="Very very very very long label that is very long">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/link/link-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/link/link-layout.xhtml
index 2dcf065..a62a85f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/link/link-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/link/link-layout.xhtml
@@ -28,7 +28,7 @@
         <tc:box label="Tests the layout of links">
 
             <f:facet name="layout">
-                <tc:gridLayout columns="auto;auto;auto;auto;auto;auto;auto"/>
+                <tc:gridLayout columns="auto auto auto auto auto auto auto"/>
             </f:facet>
 
             <tc:link id="l1" label="l" tip="3px"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/markup/tobago-1215.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/markup/tobago-1215.xhtml
index c86a69c..47b683b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/markup/tobago-1215.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/markup/tobago-1215.xhtml
@@ -24,7 +24,7 @@
     <tc:panel id="panel">
 
       <f:facet name="layout">
-        <tc:gridLayout rows="50px;auto;auto;auto;auto" />
+        <tc:gridLayout rows="50px auto auto auto auto" />
       </f:facet>
 
       <tc:out value="An image with the preferred height of 200, to test Bug TOBAGO-1215. The test is successful, if the image has the same height of 200 after the reload."/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/messages/messages-confirmation.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/messages/messages-confirmation.xhtml
index 24c95d8..75c898c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/messages/messages-confirmation.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/messages/messages-confirmation.xhtml
@@ -27,7 +27,7 @@
 
     <tc:box label="Messages must be confirmed here">
       <f:facet name="layout">
-        <tc:gridLayout rows="*;*"/>
+        <tc:gridLayout rows="1fr 1fr"/>
       </f:facet>
 
       <tc:messages id="mymessages" confirmation="true"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/messages/messages.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/messages/messages.xhtml
index 5f3f4ea..06a9308 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/messages/messages.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/messages/messages.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page>
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*;auto"/>
+      <tc:gridLayout rows="auto 1fr auto"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-bug-tobago-1091.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-bug-tobago-1091.xhtml
index 7ac3707..c45232d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-bug-tobago-1091.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-bug-tobago-1091.xhtml
@@ -26,7 +26,7 @@
 
     <tc:box label="TOBAGO-1091">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;*;auto;auto;auto"/>
+        <tc:gridLayout rows="auto 1fr auto auto auto"/>
       </f:facet>
       <tc:link
           label="Bug-Tracking: TOBAGO-1091" link="https://issues.apache.org/jira/browse/TOBAGO-1091"/>
@@ -44,14 +44,14 @@
 
       <tc:panel>
         <f:facet name="layout">
-          <tc:gridLayout columns="auto;*"/>
+          <tc:gridLayout columns="auto 1fr"/>
         </f:facet>
         <tc:button label="Open Popup" id="open">
           <f:facet name="popup">
             <tc:popup width="100px" height="100px" id="popup">
               <tc:box label="Popup" id="box">
                 <f:facet name="layout">
-                  <tc:gridLayout rows="*;auto"/>
+                  <tc:gridLayout rows="1fr auto"/>
                 </f:facet>
                 <tc:panel/>
                 <tc:button label="Close" id="close" defaultCommand="true">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-bug-tobago-1103.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-bug-tobago-1103.xhtml
index 0c75478..6fbe030 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-bug-tobago-1103.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-bug-tobago-1103.xhtml
@@ -30,12 +30,12 @@
 
     <tc:box label="Page">
       <f:facet name="layout">
-        <tc:gridLayout rows="*;auto"/>
+        <tc:gridLayout rows="1fr auto"/>
       </f:facet>
       <tc:out value="Test: Open all popups (also the date picker). Then try to close all."/>
       <tc:panel>
         <f:facet name="layout">
-          <tc:gridLayout columns="auto;*"/>
+          <tc:gridLayout columns="auto 1fr"/>
         </f:facet>
         <tc:button label="Open Popup (AJAX)" id="open-0">
           <f:ajax render="popup-1" execute="popup-1"/>
@@ -43,11 +43,11 @@
             <tc:popup width="400px" height="150px" left="150px" top="150px" id="popup-1">
               <tc:box label="Popup Level 1" id="box-1">
                 <f:facet name="layout">
-                  <tc:gridLayout rows="auto;auto;*;auto"/>
+                  <tc:gridLayout rows="auto auto 1fr auto"/>
                 </f:facet>
                 <tc:panel>
                   <f:facet name="layout">
-                    <tc:gridLayout columns="*;*;*;*"/>
+                    <tc:gridLayout columns="1fr 1fr 1fr 1fr"/>
                   </f:facet>
                   <tc:button label="Open Sub Popup (AJAX)" id="open-1">
                     <f:ajax render="popup-2" execute="popup-2"/>
@@ -55,7 +55,7 @@
                       <tc:popup width="400px" height="150px" left="200px" top="200px" id="popup-2">
                         <tc:box label="Popup Level 2" id="box-2">
                           <f:facet name="layout">
-                            <tc:gridLayout rows="auto;auto"/>
+                            <tc:gridLayout rows="auto auto"/>
                           </f:facet>
                           <tc:date label="Date" id="txdate" fieldId="date" pickerId="picker" formId="form">
                             <f:convertDateTime pattern="dd/MM/yyyy"/>
@@ -66,7 +66,7 @@
                               <tc:popup modal="false" width="200px" height="53px" left="250px" top="250px" id="popup-3">
                                 <tc:box label="Popup Level 3 (non modal)" id="box-3">
                                   <f:facet name="layout">
-                                    <tc:gridLayout rows="auto;*"/>
+                                    <tc:gridLayout rows="auto 1fr"/>
                                   </f:facet>
                                   <tc:button label="Cancel" id="close-3">
                                     <tc:attribute name="popupClose" value="immediate"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-close-after-submit-and-ajax.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-close-after-submit-and-ajax.xhtml
index e070f3e..33caa35 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-close-after-submit-and-ajax.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-close-after-submit-and-ajax.xhtml
@@ -25,7 +25,7 @@
 
     <tc:box label="Popup close after submit and AJAX" id="global">
       <f:facet name="layout">
-        <tc:gridLayout rows="*;auto;auto"/>
+        <tc:gridLayout rows="1fr auto auto"/>
       </f:facet>
       <tc:out escape="false" value="Test: Close popup partially after the submit.
       &lt;br/>Checklist:
@@ -42,14 +42,14 @@
 
       <tc:panel>
         <f:facet name="layout">
-          <tc:gridLayout columns="auto;*"/>
+          <tc:gridLayout columns="auto 1fr"/>
         </f:facet>
         <tc:button label="Open Popup" id="open">
           <f:facet name="popup">
             <tc:popup width="200px" height="100px" id="popup">
               <tc:box label="Popup" id="box">
                 <f:facet name="layout">
-                  <tc:gridLayout rows="*;auto"/>
+                  <tc:gridLayout rows="1fr auto"/>
                 </f:facet>
                 <tc:in label="Edit Value" value="#{popupData.value}" fieldId="in"/>
                 <tc:button label="Save and Close" id="close">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-draggable.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-draggable.xhtml
index f032c15..a5e6499 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-draggable.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-draggable.xhtml
@@ -26,7 +26,7 @@
 
     <tc:box label="Popup draggable">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;*;auto;auto;auto"/>
+        <tc:gridLayout rows="auto 1fr auto auto auto"/>
       </f:facet>
 
       <tc:button label="Open Popup" id="open">
@@ -34,7 +34,7 @@
           <tc:popup width="100px" height="100px" id="popup">
             <tc:box label="Popup" id="box">
               <f:facet name="layout">
-                <tc:gridLayout rows="*;auto"/>
+                <tc:gridLayout rows="1fr auto"/>
               </f:facet>
               <tc:panel/>
               <tc:button label="Close" id="close" defaultCommand="true">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-in-sheet.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-in-sheet.xhtml
index fab483c..0eabcd5 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-in-sheet.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/popup-in-sheet.xhtml
@@ -24,11 +24,11 @@
   <tc:page width="800px" height="300px" id="page">
     <tc:box label="Popups inside sheet">
       <f:facet name="layout">
-        <tc:gridLayout rows="*;0px;0px"/>
+        <tc:gridLayout rows="1fr 0px 0px"/>
       </f:facet>
 
       <tc:sheet id="sheet"
-                var="entry" columns="1*;1*;1*;1*" value="#{popupReference.sheet}">
+                var="entry" columns="1fr 1fr 1fr 1fr" value="#{popupReference.sheet}">
 
         <tc:column label="Column 1">
           <tc:link label="#{entry.column1}" actionListener="#{popupReference.selectEntry}">
@@ -58,13 +58,13 @@
         <!-- the clientId of this popup is "page:sheet:popup1" -->
         <tc:box label="Popup1">
           <f:facet name="layout">
-            <tc:gridLayout rows="auto;1*;auto"/>
+            <tc:gridLayout rows="auto 1fr auto"/>
           </f:facet>
           <tc:in label="column 1 value:" value="#{popupReference.entry.column1}"/>
           <tc:panel/>
           <tc:panel>
             <f:facet name="layout">
-              <tc:gridLayout columns="1*;auto;auto"/>
+              <tc:gridLayout columns="1fr auto auto"/>
             </f:facet>
             <tc:panel/>
             <tc:button label="Save" actionListener="#{popupReference.saveChanges}">
@@ -82,7 +82,7 @@
         <!-- the clientId of this popup is "page:sheet:popup2" -->
         <tc:box label="Popup1">
           <f:facet name="layout">
-            <tc:gridLayout rows="auto;auto;auto;1*;auto"/>
+            <tc:gridLayout rows="auto auto auto 1fr auto"/>
           </f:facet>
           <tc:in label="column 1 value:" value="#{popupReference.entry.column1}"/>
           <tc:in label="column 2 value:" value="#{popupReference.entry.column2}"/>
@@ -90,7 +90,7 @@
           <tc:panel/>
           <tc:panel>
             <f:facet name="layout">
-              <tc:gridLayout columns="1*;auto;auto"/>
+              <tc:gridLayout columns="1fr auto auto"/>
             </f:facet>
             <tc:panel/>
             <tc:button label="Save" actionListener="#{popupReference.saveChanges}">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/z-index.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/z-index.xhtml
index f9986e6..a148e2f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/z-index.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/popup/z-index.xhtml
@@ -258,7 +258,7 @@
 
 <tc:box label="Page (z-index = 0)">
   <f:facet name="layout">
-    <tc:gridLayout rows="60px;auto;auto;*;auto;auto"/>
+    <tc:gridLayout rows="60px auto auto 1fr auto auto"/>
   </f:facet>
   <tc:out
       value="This page is to check, if the layered presentation is corret. It will be usually defined by setting
@@ -266,7 +266,7 @@
            also have the z-index set in the common renderer."/>
   <tc:panel>
     <f:facet name="layout">
-      <tc:gridLayout columns="*;4*"/>
+      <tc:gridLayout columns="1fr 4fr"/>
     </f:facet>
 
     <tc:link label="Link to Apache" link="http://www.apache.org/"/>
@@ -279,14 +279,14 @@
     <tc:selectItem itemLabel="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB" itemValue="B"/>
     <tc:selectItem itemLabel="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" itemValue="C"/>
   </tc:selectOneChoice>
-  <tc:sheet var="v1" columns="*;*;*" showRowRange="left" showPageRange="right" showDirectLinks="center">
+  <tc:sheet var="v1" columns="1fr 1fr 1fr" showRowRange="left" showPageRange="right" showDirectLinks="center">
     <tc:column label="Column 1"/>
     <tc:column label="Column 2"/>
     <tc:column label="Column 3"/>
   </tc:sheet>
   <tc:panel>
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*"/>
+      <tc:gridLayout columns="1fr 1fr"/>
     </f:facet>
     <tc:selectBooleanCheckbox label="1st Popup Modal" value="#{zIndex.modal1}" id="modal1st"/>
     <tc:panel/>
@@ -295,14 +295,14 @@
   </tc:panel>
   <tc:panel>
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto;auto;*"/>
+      <tc:gridLayout columns="auto auto auto 1fr"/>
     </f:facet>
     <tc:button label="Open Popup">
       <f:facet name="popup">
         <tc:popup width="600px" height="470px" left="100px" top="100px" id="popup-1" modal="#{zIndex.modal1}">
           <tc:box label="Popup (z-index = 1 (TODO))" id="box-1">
             <f:facet name="layout">
-              <tc:gridLayout rows="auto;auto;*;auto"/>
+              <tc:gridLayout rows="auto auto 1fr auto"/>
             </f:facet>
             <tc:date label="Date">
               <f:convertDateTime pattern="dd/MM/yyyy"/>
@@ -312,21 +312,21 @@
               <tc:selectItem itemLabel="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB" itemValue="B"/>
               <tc:selectItem itemLabel="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" itemValue="C"/>
             </tc:selectOneChoice>
-            <tc:sheet var="v1" columns="*;*;*" showRowRange="left" showPageRange="right" showDirectLinks="center">
+            <tc:sheet var="v1" columns="1fr 1fr 1fr" showRowRange="left" showPageRange="right" showDirectLinks="center">
               <tc:column label="Column 1"/>
               <tc:column label="Column 2"/>
               <tc:column label="Column 3"/>
             </tc:sheet>
             <tc:panel>
               <f:facet name="layout">
-                <tc:gridLayout columns="*;*;*;*"/>
+                <tc:gridLayout columns="1fr 1fr 1fr 1fr"/>
               </f:facet>
               <tc:button label="Open Sub Popup">
                 <f:facet name="popup">
                   <tc:popup width="400px" height="500px" left="200px" top="50px" id="popup-2" modal="#{zIndex.modal2}">
                     <tc:box label="Popup (z-index = 2 (TODO))" id="box-2">
                       <f:facet name="layout">
-                        <tc:gridLayout rows="auto;auto;*;auto"/>
+                        <tc:gridLayout rows="auto auto 1fr auto"/>
                       </f:facet>
                       <tc:date label="Date">
                         <f:convertDateTime pattern="dd/MM/yyyy"/>
@@ -336,7 +336,7 @@
                         <tc:selectItem itemLabel="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB" itemValue="B"/>
                         <tc:selectItem itemLabel="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" itemValue="C"/>
                       </tc:selectOneChoice>
-                      <tc:sheet var="v1" columns="*;*;*" showRowRange="left" showPageRange="right"
+                      <tc:sheet var="v1" columns="1fr 1fr 1fr" showRowRange="left" showPageRange="right"
                                 showDirectLinks="center">
                         <tc:column label="Column 1"/>
                         <tc:column label="Column 2"/>
@@ -344,7 +344,7 @@
                       </tc:sheet>
                       <tc:panel>
                         <f:facet name="layout">
-                          <tc:gridLayout columns="*;*;*"/>
+                          <tc:gridLayout columns="1fr 1fr 1fr"/>
                         </f:facet>
                         <tc:button label="Cancel">
                           <tc:attribute name="popupClose" value="immediate"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/reload/tip.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/reload/tip.xhtml
index 1a2766d..7bf273b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/reload/tip.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/reload/tip.xhtml
@@ -23,13 +23,13 @@
         xmlns:f="http://java.sun.com/jsf/core">
   <tc:page>
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
     <tc:separator label="Reload test for tips."/>
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout margin="10px" rows="20px;auto;20px;auto;" columns="300px"/>
+        <tc:gridLayout margin="10px" rows="20px auto 20px auto;" columns="300px"/>
       </f:facet>
       <f:facet name="reload">
         <tc:reload frequency="5000" update="#{reload.reload}"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/resource/resource-manager.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/resource/resource-manager.xhtml
index b6254de..3bfc5bc 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/resource/resource-manager.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/resource/resource-manager.xhtml
@@ -24,7 +24,7 @@
   <tc:page>
 
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;*"/>
+      <tc:gridLayout rows="auto auto 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
 
@@ -33,7 +33,7 @@
 
     <tc:messages/>
 
-    <tc:sheet columns="3*;*;*;3*" value="#{resourceBean.resultList}" var="item">
+    <tc:sheet columns="3fr 1fr 1fr 3fr" value="#{resourceBean.resultList}" var="item">
       <tc:column label="Name">
         <tc:out value="#{item.name}"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/resource/tobago-694.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/resource/tobago-694.xhtml
index 480b91a..3e7b3d3 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/resource/tobago-694.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/resource/tobago-694.xhtml
@@ -24,7 +24,7 @@
 
   <tc:page>
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;auto;auto;*" columns="auto"/>
+      <tc:gridLayout rows="auto auto auto auto 1fr" columns="auto"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/script/script-event.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/script/script-event.xhtml
index 885b665..a31ead4 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/script/script-event.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/script/script-event.xhtml
@@ -23,7 +23,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="*;*" rows="auto;*"/>
+      <tc:gridLayout columns="1fr 1fr" rows="auto 1fr"/>
     </f:facet>
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
 
@@ -33,7 +33,7 @@
 
     <tc:box id="panel">
       <f:facet name="layout">
-        <tc:gridLayout rows="*;auto;auto;auto"/>
+        <tc:gridLayout rows="1fr auto auto auto"/>
       </f:facet>
 
       <tc:script
@@ -53,7 +53,7 @@
 
     <tc:box id="list" label="time">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;*"/>
+        <tc:gridLayout rows="auto 1fr"/>
       </f:facet>
 
       <tc:button label="Reload List">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/checkbox-bug-tobago-1041.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/checkbox-bug-tobago-1041.xhtml
index dd0a59f..10e269f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/checkbox-bug-tobago-1041.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/checkbox-bug-tobago-1041.xhtml
@@ -25,7 +25,7 @@
     <!-- <tc:gridLayoutConstraint width="1000px" height="600px"/> -->
     <f:facet name="layout">
       <tc:gridLayout
-          rows="0px;auto;auto"
+          rows="0px auto auto"
           margin="30px"/>
     </f:facet>
 
@@ -35,8 +35,8 @@
     <tc:box label="test labels with literals">
 
       <f:facet name="layout">
-        <tc:gridLayout columns="2*;*;2*"
-                       rows="auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+        <tc:gridLayout columns="2fr 1fr 2fr"
+                       rows="auto auto auto auto auto auto auto auto auto auto"/>
       </f:facet>
 
       <tc:label value="tag"/>
@@ -79,8 +79,8 @@
     <tc:box label="same with value expressions">
 
       <f:facet name="layout">
-      <tc:gridLayout columns="2*;*;2*"
-                     rows="auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+      <tc:gridLayout columns="2fr 1fr 2fr"
+                     rows="auto auto auto auto auto auto auto auto auto auto"/>
       </f:facet>
 
       <tc:label value="tag"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/selectBooleanCheckbox-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/selectBooleanCheckbox-layout.xhtml
index c990446..1745789 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/selectBooleanCheckbox-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/selectBooleanCheckbox-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/selectBooleanCheckbox.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/selectBooleanCheckbox.xhtml
index df8c819..a0c3cb5 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/selectBooleanCheckbox.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectBooleanCheckbox/selectBooleanCheckbox.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
       <!-- fixme: rows="20px" -->
-      <tc:gridLayout columns="*;2*;2*" rows="auto;20px" columnSpacing="30px"/>
+      <tc:gridLayout columns="1fr 2fr 2fr" rows="auto 20px" columnSpacing="30px"/>
     </f:facet>
 
     <tc:messages>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyCheckbox/selectManyCheckbox-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyCheckbox/selectManyCheckbox-layout.xhtml
index 0c19ba3..2a2d2e2 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyCheckbox/selectManyCheckbox-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyCheckbox/selectManyCheckbox-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyCheckbox/selectManyCheckbox.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyCheckbox/selectManyCheckbox.xhtml
index e43b19f..e226b67 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyCheckbox/selectManyCheckbox.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyCheckbox/selectManyCheckbox.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
       <!-- fixme: rows="20px" -->
-      <tc:gridLayout columns="*;2*" rows="auto;20px;auto;auto;auto;auto;auto;auto;auto" columnSpacing="30px"/>
+      <tc:gridLayout columns="1fr 2fr" rows="auto 20px auto auto auto auto auto auto auto" columnSpacing="30px"/>
     </f:facet>
 
     <tc:messages>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox-layout.xhtml
index dbd028a..d8e4651 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox-value.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox-value.xhtml
index 4a5d04f..1d5057c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox-value.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox-value.xhtml
@@ -24,7 +24,7 @@
   <tc:page>
     <!-- <tc:gridLayoutConstraint width="630px" height="800px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="20px;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+      <tc:gridLayout rows="20px auto auto auto auto auto auto auto auto auto auto auto auto"/>
     </f:facet>
 
     <tc:messages>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox.xhtml
index aa044a5..7b0df11 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyListbox/selectManyListbox.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="630px" height="600px"/> -->
     <f:facet name="layout">
       <!-- fixme: rows="20px" -->
-      <tc:gridLayout columns="*;2*" rows="auto;20px;auto;auto;auto;auto;auto;auto" columnSpacing="30px"/>
+      <tc:gridLayout columns="1fr 2fr" rows="auto 20px auto auto auto auto auto auto" columnSpacing="30px"/>
     </f:facet>
 
     <tc:messages>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle-layout.xhtml
index 810cf2d..a965427 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="*;2*" rows="auto;auto"/>
+      <tc:gridLayout columns="1fr 2fr" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle-value.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle-value.xhtml
index b3c5024..7acfbda 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle-value.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle-value.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="400px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*;auto;auto"/>
+      <tc:gridLayout rows="auto 1fr auto auto"/>
     </f:facet>
 
     <tc:messages/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle.xhtml
index 4e4150c..d3096d2 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectManyShuttle/selectManyShuttle.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
       <!-- fixme: rows="20px" -->
-      <tc:gridLayout columns="*;2*" rows="auto;20px;auto;auto;auto;auto;auto;auto" columnSpacing="30px"/>
+      <tc:gridLayout columns="1fr 2fr" rows="auto 20px auto auto auto auto auto auto" columnSpacing="30px"/>
     </f:facet>
 
     <tc:messages>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneChoice/selectOneChoice-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneChoice/selectOneChoice-layout.xhtml
index 5349666..062048c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneChoice/selectOneChoice-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneChoice/selectOneChoice-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneChoice/selectOneChoice.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneChoice/selectOneChoice.xhtml
index 12dcd54..97ede3d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneChoice/selectOneChoice.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneChoice/selectOneChoice.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
       <!-- fixme: rows="20px" -->
-      <tc:gridLayout columns="*;2*" rows="auto;20px" columnSpacing="30px"/>
+      <tc:gridLayout columns="1fr 2fr" rows="auto 20px" columnSpacing="30px"/>
     </f:facet>
 
     <tc:messages>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneListbox/selectOneListbox-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneListbox/selectOneListbox-layout.xhtml
index 07c87c2..6367bd7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneListbox/selectOneListbox-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneListbox/selectOneListbox-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneListbox/selectOneListbox.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneListbox/selectOneListbox.xhtml
index 50b4508..f5e6689 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneListbox/selectOneListbox.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneListbox/selectOneListbox.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
       <!-- fixme: rows="20px" -->
-      <tc:gridLayout columns="*;2*" rows="auto;20px;*;*;*;*;*;auto" columnSpacing="30px"/>
+      <tc:gridLayout columns="1fr 2fr" rows="auto 20px 1fr 1fr 1fr 1fr 1fr auto" columnSpacing="30px"/>
     </f:facet>
 
     <tc:messages>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneRadio/selectOneRadio-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneRadio/selectOneRadio-layout.xhtml
index f345575..053e30d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneRadio/selectOneRadio-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneRadio/selectOneRadio-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneRadio/selectOneRadio.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneRadio/selectOneRadio.xhtml
index f114519..8530687 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneRadio/selectOneRadio.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/selectOneRadio/selectOneRadio.xhtml
@@ -26,7 +26,7 @@
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
       <!-- fixme: rows="20px" -->
-      <tc:gridLayout columns="*;2*" rows="auto;20px;auto;auto;auto;auto;auto;auto;auto" columnSpacing="30px"/>
+      <tc:gridLayout columns="1fr 2fr" rows="auto 20px auto auto auto auto auto auto auto" columnSpacing="30px"/>
     </f:facet>
 
     <tc:messages>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-with-label-facet.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-with-label-facet.xhtml
index 5cc813d..a77818a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-with-label-facet.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-with-label-facet.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
 
     <tc:separator id="sep-0">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-with-label.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-with-label.xhtml
index 80942fe..6461932 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-with-label.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-with-label.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
 
     <tc:separator label="Label (Ög)" id="sep-0"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-without-label.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-without-label.xhtml
index 6b8e118..6ab2bc9 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-without-label.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/separator/separator-without-label.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
 
     <tc:separator id="sep-0"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-height-header-footer.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-height-header-footer.xhtml
index 03b74a4..91a4aa8 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-height-header-footer.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-height-header-footer.xhtml
@@ -28,14 +28,14 @@
     <tc:box>
 
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;auto;auto;auto" rowSpacing="50px" margin="50px"/>
+        <tc:gridLayout rows="auto auto auto auto" rowSpacing="50px" margin="50px"/>
       </f:facet>
 
       <!--
         haeder: false
         footer: false
        -->
-      <tc:sheet value="#{sheet.solarArray3}" id="sheet1" columns="*;*" var="luminary" rows="3"
+      <tc:sheet value="#{sheet.solarArray3}" id="sheet1" columns="1fr 1fr" var="luminary" rows="3"
                 showHeader="false">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
@@ -49,7 +49,7 @@
         haeder: true
         footer: false
        -->
-      <tc:sheet value="#{sheet.solarArray3}" id="sheet2" columns="*;*" var="luminary" rows="3"
+      <tc:sheet value="#{sheet.solarArray3}" id="sheet2" columns="1fr 1fr" var="luminary" rows="3"
                 showHeader="true">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
@@ -63,7 +63,7 @@
         haeder: false
         footer: true
        -->
-      <tc:sheet value="#{sheet.solarArray3}" id="sheet3" columns="*;*" var="luminary" rows="3"
+      <tc:sheet value="#{sheet.solarArray3}" id="sheet3" columns="1fr 1fr" var="luminary" rows="3"
                 showHeader="false" showPagingAlways="true">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
@@ -77,7 +77,7 @@
         haeder: true
         footer: true
        -->
-      <tc:sheet value="#{sheet.solarArray3}" id="sheet4" columns="*;*" var="luminary" rows="3"
+      <tc:sheet value="#{sheet.solarArray3}" id="sheet4" columns="1fr 1fr" var="luminary" rows="3"
                 showHeader="true" showPagingAlways="true">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-height-rows.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-height-rows.xhtml
index 73f62f9..c90ed15 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-height-rows.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-height-rows.xhtml
@@ -28,11 +28,11 @@
     <tc:box>
 
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;auto;auto;100px" rowSpacing="50px" margin="50px"/>
+        <tc:gridLayout rows="auto auto auto 100px" rowSpacing="50px" margin="50px"/>
       </f:facet>
 
       <!-- fixed rows = 3 - show exactly 3 rows, but have more -->
-      <tc:sheet value="#{sheet.solarArray}" id="sheet1" columns="*;*" var="luminary" rows="3"
+      <tc:sheet value="#{sheet.solarArray}" id="sheet1" columns="1fr 1fr" var="luminary" rows="3"
                 showHeader="true" showPagingAlways="true">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
@@ -43,7 +43,7 @@
       </tc:sheet>
 
       <!-- rows = undefined (default 0), data model has 3 => show all = 3 -->
-      <tc:sheet value="#{sheet.solarArray3}" id="sheet2" columns="*;*" var="luminary"
+      <tc:sheet value="#{sheet.solarArray3}" id="sheet2" columns="1fr 1fr" var="luminary"
                 showHeader="true" showPagingAlways="true">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
@@ -54,7 +54,7 @@
       </tc:sheet>
 
       <!-- data-model has undefined rowCount, rows=3 -->
-      <tc:sheet value="#{sheet.undefined}" id="sheet3" columns="*;*" var="luminary" rows="3"
+      <tc:sheet value="#{sheet.undefined}" id="sheet3" columns="1fr 1fr" var="luminary" rows="3"
                 showHeader="true" showPagingAlways="true">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
@@ -65,7 +65,7 @@
       </tc:sheet>
 
       <!-- data-model has undefined rowCount, rows = undefined -->
-      <tc:sheet value="#{sheet.undefined}" id="sheet4" columns="*;*" var="luminary"
+      <tc:sheet value="#{sheet.undefined}" id="sheet4" columns="1fr 1fr" var="luminary"
                 showHeader="true" showPagingAlways="true">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-width.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-width.xhtml
index a98cc0f..1b59220 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-width.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-auto-width.xhtml
@@ -31,7 +31,7 @@
         <tc:gridLayout columns="auto" rows="auto"/>
       </f:facet>
 
-      <tc:sheet value="#{sheet.solarArray}" id="sheet1" columns="*;*" var="luminary" rows="3"
+      <tc:sheet value="#{sheet.solarArray}" id="sheet1" columns="1fr 1fr" var="luminary" rows="3"
                 showHeader="true" showPagingAlways="true">
         <tc:column label="Name" id="name" sortable="true">
           <tc:out value="#{luminary.name}"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-bug-tobago-1090.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-bug-tobago-1090.xhtml
index beaab06..c2ce6a1 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-bug-tobago-1090.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-bug-tobago-1090.xhtml
@@ -26,7 +26,7 @@
 
     <tc:box label="TOBAGO-1090">
       <f:facet name="layout">
-        <tc:gridLayout rows="auto;*;auto"/>
+        <tc:gridLayout rows="auto 1fr auto"/>
       </f:facet>
       <tc:link
           label="Bug-Tracking: TOBAGO-1090" link="https://issues.apache.org/jira/browse/TOBAGO-1090"/>
@@ -42,7 +42,7 @@
             &lt;li>Check: 2nd row (Saturn) must be selected&lt;/li>
             &lt;/ol>"/>
 
-      <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="*;*" var="luminary" rows="5" selectable="single">
+      <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="1fr 1fr" var="luminary" rows="5" selectable="single">
         <tc:column label="Name" sortable="true">
           <tc:out value="#{luminary.name}" id="name"/>
         </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-large.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-large.xhtml
index 837aa51..981d1d7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-large.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-large.xhtml
@@ -25,10 +25,10 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="*;auto"/>
+      <tc:gridLayout rows="1fr auto"/>
     </f:facet>
 
-    <tc:sheet value="#{sheet.localeList}" id="sheet" columns="auto;5*;5*;5*;*" var="entry" rows="1000">
+    <tc:sheet value="#{sheet.localeList}" id="sheet" columns="auto 5fr 5fr 5fr 1fr" var="entry" rows="1000">
       <tc:columnSelector disabled="#{entry.disabled}"/>
       <tc:column label="Locale" id="l" sortable="true">
         <tc:out value="#{entry.locale}"/>
@@ -46,7 +46,7 @@
 
     <tc:box label="Performance test">
       <f:facet name="layout">
-        <tc:gridLayout columns="2*;*"/>
+        <tc:gridLayout columns="2fr 1fr"/>
       </f:facet>
       <tc:in readonly="true" label="Select 1st row"/>
       <tc:button label="Run" omit="true">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-multi-header.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-multi-header.xhtml
index bd44534..8982e05 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-multi-header.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-multi-header.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="802px" height="230px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*;auto"/>
+      <tc:gridLayout rows="auto 1fr auto"/>
     </f:facet>
 
     <tc:script>
@@ -50,7 +50,7 @@
 
     <tc:messages />
 
-    <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="*;*;*;*" var="luminary" showRoot="true"
+    <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="1fr 1fr 1fr 1fr" var="luminary" showRoot="true"
         showRowRange="left" rows="5">
 
       <f:facet name="header">
@@ -93,7 +93,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;auto"/>
+        <tc:gridLayout columns="1fr auto"/>
       </f:facet>
 
       <tc:panel/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-1.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-1.xhtml
index 87fe1d5..95382d8 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-1.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-1.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
 
-    <tc:sheet value="#{sheet.solarArray}" id="s3" columns="*;*" var="luminary" rows="1">
+    <tc:sheet value="#{sheet.solarArray}" id="s3" columns="1fr 1fr" var="luminary" rows="1">
       <tc:column label="Name" id="name" sortable="true">
         <tc:out value="#{luminary.name}"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-11.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-11.xhtml
index f1a2768..f75d5ec 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-11.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-11.xhtml
@@ -27,7 +27,7 @@
       <tc:gridLayout rows="100px"/>
     </f:facet>
 
-    <tc:sheet value="#{sheet.solarArray}" id="s2" columns="*;*" var="luminary" rows="11">
+    <tc:sheet value="#{sheet.solarArray}" id="s2" columns="1fr 1fr" var="luminary" rows="11">
       <tc:column label="Name" id="name" sortable="true">
         <tc:out value="#{luminary.name}"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-20.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-20.xhtml
index 8f21622..1c99b2d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-20.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-paging-20.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
 
-    <tc:sheet value="#{sheet.solarArray}" id="s1" columns="*;*" var="luminary" rows="20">
+    <tc:sheet value="#{sheet.solarArray}" id="s1" columns="1fr 1fr" var="luminary" rows="20">
       <tc:column label="Name" id="name" sortable="true">
         <tc:out value="#{luminary.name}"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-reload.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-reload.xhtml
index f8f7176..40945c6 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-reload.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-reload.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="40px;auto;auto;*"/>
+      <tc:gridLayout rows="40px auto auto 1fr"/>
     </f:facet>
 
     <tc:out value="Starting by 0 every 2 seconds the page will be reloaded. The counter on the server will
@@ -34,7 +34,7 @@
     <tc:out value="After 3 seconds there must only a 304 (not modified) reload, so we expect 0 as value."/>
     <tc:out value="After 5 seconds there must be a normal reload, so we expect 2 as value."/>
 
-    <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="*;*" var="luminary" rows="5">
+    <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="1fr 1fr" var="luminary" rows="5">
 
       <f:facet name="reload">
         <tc:reload frequency="2000" update="#{reload.onlyEven}" />
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-selector.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-selector.xhtml
index 6a369f7..e9a58aa 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-selector.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-selector.xhtml
@@ -25,7 +25,7 @@
 
   <tc:page id="page">
     <f:facet name="layout">
-      <tc:gridLayout rows="160px;auto" columns="600px"/>
+      <tc:gridLayout rows="160px auto" columns="600px"/>
     </f:facet>
 
     <tc:flowLayout>
@@ -62,7 +62,7 @@
 
     </tc:flowLayout>
 
-    <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="auto;*;*" var="luminary" rows="20">
+    <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="auto 1fr 1fr" var="luminary" rows="20">
 
       <tc:columnSelector disabled="#{luminary.orbit == 'Sun'}"/>
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-simple.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-simple.xhtml
index 2a7a95a..0e810d7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-simple.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-simple.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
 
-    <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="*;*" var="luminary" rows="5">
+    <tc:sheet value="#{sheet.solarArray}" id="sheet" columns="1fr 1fr" var="luminary" rows="5">
       <tc:column label="Name" id="name" sortable="true">
         <tc:out value="#{luminary.name}"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-sort.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-sort.xhtml
index 307d0d4..9848409 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-sort.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-sort.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
 
-    <tc:sheet value="#{sort.list}" id="sheet" columns="*;*;*;*;*;*" var="entry">
+    <tc:sheet value="#{sort.list}" id="sheet" columns="1fr 1fr 1fr 1fr 1fr 1fr" var="entry">
       <tc:column label="tc:out" id="first" sortable="true">
         <tc:out value="#{entry.first}" id="out"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-tree.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-tree.xhtml
index b91d568..47498df 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-tree.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-tree.xhtml
@@ -24,10 +24,10 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="900px" height="500px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="*;auto"/>
+      <tc:gridLayout rows="1fr auto"/>
     </f:facet>
 
-    <tc:sheet value="#{tree.tree}" id="sheet" columns="*;*" var="row" showRoot="true" showRootJunction="true">
+    <tc:sheet value="#{tree.tree}" id="sheet" columns="1fr 1fr" var="row" showRoot="true" showRootJunction="true">
 
       <tc:columnNode label="Tree" id="tree">
         <tc:treeIndent/>
@@ -46,7 +46,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;auto"/>
+        <tc:gridLayout columns="1fr auto"/>
       </f:facet>
 
       <tc:panel/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-unknown-row-count.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-unknown-row-count.xhtml
index 7dc88e9..d09d0ba 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-unknown-row-count.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/sheet/sheet-unknown-row-count.xhtml
@@ -28,7 +28,7 @@
       <tc:gridLayout rows="600px"/>
     </f:facet>
 
-    <tc:sheet value="#{sheet.undefined}" id="sheet" columns="*;*" var="luminary" rows="20">
+    <tc:sheet value="#{sheet.undefined}" id="sheet" columns="1fr 1fr" var="luminary" rows="20">
       <tc:column label="Name" id="name" sortable="true">
         <tc:out value="#{luminary.name}"/>
       </tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tabGroup/simple.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tabGroup/simple.xhtml
index cab7710..b78ffb8 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tabGroup/simple.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tabGroup/simple.xhtml
@@ -32,7 +32,7 @@
       </tc:tab>
       <tc:tab label="Tab 1">
         <f:facet name="layout">
-          <tc:gridLayout columns="*;*" rows="*;*"/>
+          <tc:gridLayout columns="1fr 1fr" rows="1fr 1fr"/>
         </f:facet>
         <tc:textarea />
         <tc:textarea />
@@ -69,7 +69,7 @@
         </tc:tab>
         <tc:tab label="Tab 1">
           <f:facet name="layout">
-            <tc:gridLayout columns="*;*" rows="*;*"/>
+            <tc:gridLayout columns="1fr 1fr" rows="1fr 1fr"/>
           </f:facet>
           <tc:textarea />
           <tc:textarea />
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/text/textarea-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/text/textarea-layout.xhtml
index 8f6b04a..1a2b292 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/text/textarea-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/text/textarea-layout.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="700px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout columns="auto;auto" rows="auto;auto"/>
+      <tc:gridLayout columns="auto auto" rows="auto auto"/>
     </f:facet>
 
     <tc:label value="tc"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/time/time.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/time/time.xhtml
index dec68c4..f781c3e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/time/time.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/time/time.xhtml
@@ -25,7 +25,7 @@
   <tc:page>
     <tc:box>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;*;*" rows="auto;auto;auto;auto;auto;auto;auto;auto;*;auto"/>
+        <tc:gridLayout columns="1fr 1fr 1fr" rows="auto auto auto auto auto auto auto auto 1fr auto"/>
       </f:facet>
       <!-- <tc:gridLayoutConstraint width="900px" height="300px" marginLeft="10px" marginTop="10px" marginRight="10px"/> -->
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-command.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-command.xhtml
index 1f647b8..43200ce 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-command.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-command.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
 
     <tc:out value="Tree with commands as nodes:"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-expanded.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-expanded.xhtml
index f03809e..9b978ad 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-expanded.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-expanded.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;*"/>
+      <tc:gridLayout rows="auto auto 1fr"/>
     </f:facet>
 
     <tc:out value="Test expanded state of the tree nodes:"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-infinite.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-infinite.xhtml
index 4cb0552..85e686e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-infinite.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-infinite.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="20px;*"/>
+      <tc:gridLayout rows="20px 1fr"/>
     </f:facet>
 
     <tc:panel>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-marked-with-model.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-marked-with-model.xhtml
index f4df280..faed9d8 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-marked-with-model.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-marked-with-model.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="*;2*;auto"/>
+      <tc:gridLayout rows="1fr 2fr auto"/>
     </f:facet>
 
     <tc:out escape="false" value="Tree with a marked node which should be stored tempotarily in the view.
@@ -49,7 +49,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;auto;auto"/>
+        <tc:gridLayout columns="1fr auto auto"/>
       </f:facet>
 
       <tc:panel/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-marked-without-model.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-marked-without-model.xhtml
index 2589351..0e6f418 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-marked-without-model.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-marked-without-model.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="600px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="*;2*;auto"/>
+      <tc:gridLayout rows="1fr 2fr auto"/>
     </f:facet>
 
     <tc:out escape="false" value="Tree with a marked node which should be stored tempotarily in the view.
@@ -48,7 +48,7 @@
 
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;auto"/>
+        <tc:gridLayout columns="1fr auto"/>
       </f:facet>
 
       <tc:panel/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-select-via-state.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-select-via-state.xhtml
index c0870da..279338f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-select-via-state.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-select-via-state.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="20px;*;auto;auto"/>
+      <tc:gridLayout rows="20px 1fr auto auto"/>
     </f:facet>
 
     <tc:out value="Stores the selection value in the state object of the tree."/>
@@ -39,7 +39,7 @@
     <tc:in fieldId="in" label="Required" required="true"/>
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;auto;auto"/>
+        <tc:gridLayout columns="1fr auto auto"/>
       </f:facet>
       <tc:panel/>
       <tc:button id="cancel" label="Cancel" immediate="true"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-select-via-value.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-select-via-value.xhtml
index 04e2eb5..4f3ded5 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-select-via-value.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-select-via-value.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="20px;*;auto;auto"/>
+      <tc:gridLayout rows="20px 1fr auto auto"/>
     </f:facet>
 
     <tc:out value="Stores the selection value in the value attribute of the tc:treeSelect component."/>
@@ -40,7 +40,7 @@
     <tc:in fieldId="in" label="Required" required="true"/>
     <tc:panel>
       <f:facet name="layout">
-        <tc:gridLayout columns="*;auto;auto"/>
+        <tc:gridLayout columns="1fr auto auto"/>
       </f:facet>
       <tc:panel/>
       <tc:button id="cancel" label="Cancel" immediate="true"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-show-attributes.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-show-attributes.xhtml
index ba05d05..3283baf 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-show-attributes.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-show-attributes.xhtml
@@ -27,7 +27,7 @@
 
   <tc:page label="Different show attributes" id="page">
     <f:facet name="layout">
-      <tc:gridLayout columns="300px;200px;200px;200px;200px" rows="20px;20px;100px;100px;100px;100px;*"/>
+      <tc:gridLayout columns="300px 200px 200px 200px 200px" rows="20px 20px 100px 100px 100px 100px 1fr"/>
     </f:facet>
 
     <tc:panel/>
@@ -47,7 +47,7 @@
     <tc:panel>
       <!-- <tc:gridLayoutConstraint rowSpan="4"/> -->
       <f:facet name="layout">
-        <tc:gridLayout columns="100px;195px" rows="100px;100px;100px;100px"/>
+        <tc:gridLayout columns="100px 195px" rows="100px 100px 100px 100px"/>
       </f:facet>
 
       <tc:label value="show root = true">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-simple-with-data.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-simple-with-data.xhtml
index b9a4ea9..4c1f418 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-simple-with-data.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-simple-with-data.xhtml
@@ -25,7 +25,7 @@
   <tc:page>
     <!-- <tc:gridLayoutConstraint width="600px" height="300px" /> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
 
     <tc:out value="Simple tree with deprecated &lt;tc:treeData> tag:"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-simple.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-simple.xhtml
index f3e9da7..2a5be62 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-simple.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/tree/tree-simple.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
 
     <tc:out value="Simple tree:"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/treeMenu/treeMenu-command.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/treeMenu/treeMenu-command.xhtml
index 63f681d..a103270 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/treeMenu/treeMenu-command.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/treeMenu/treeMenu-command.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
 
     <tc:out value="Tree Menu with commands as nodes:"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/treeMenu/treeMenu-simple.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/treeMenu/treeMenu-simple.xhtml
index 9549f0e..d1250e7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/treeMenu/treeMenu-simple.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/treeMenu/treeMenu-simple.xhtml
@@ -25,7 +25,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="300px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;*"/>
+      <tc:gridLayout rows="auto 1fr"/>
     </f:facet>
 
     <tc:out value="Simple Tree Menu:"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/type/measure-image-with-constraints.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/type/measure-image-with-constraints.xhtml
index 0317d19..1837f24 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/type/measure-image-with-constraints.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/type/measure-image-with-constraints.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="2000px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+      <tc:gridLayout rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto"/>
     </f:facet>
     <!--
     Test of different ways to set the size of tc:gridLayoutConstraint and tc:image.
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/type/measure-image-without-constraints.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/type/measure-image-without-constraints.xhtml
index 7d01734..197f444 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/type/measure-image-without-constraints.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/90000-attic/type/measure-image-without-constraints.xhtml
@@ -24,7 +24,7 @@
   <tc:page id="page">
     <!-- <tc:gridLayoutConstraint width="600px" height="2000px"/> -->
     <f:facet name="layout">
-      <tc:gridLayout rows="auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto;auto"/>
+      <tc:gridLayout rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto"/>
     </f:facet>
     <!--
     Test of different ways to set the size of tc:gridLayoutConstraint and tc:image.
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/init.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/init.xhtml
index aed585a..6052c6b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/init.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/init.xhtml
@@ -26,7 +26,7 @@
     <tc:event event="load" action="#{navigationState.gotoFirst}"/>
 
     <!-- todo: justifyContent -->
-    <tc:flexLayout rows="auto;auto" alignItems="center" justifyContent="center">
+    <tc:flexLayout rows="auto auto" alignItems="center" justifyContent="center">
 
       <tc:image value="#{request.contextPath}/image/tobago_head.png">
         <tc:style width="150px" height="83px"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/logging-info.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/logging-info.xhtml
index 085cc63..c953408 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/logging-info.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/logging-info.xhtml
@@ -24,14 +24,14 @@
                 xmlns="http://www.w3.org/1999/xhtml">
   <ui:param name="title" value="Logging Info"/>
 
-  <tc:gridLayout rows="auto;auto;auto;*" rendered="#{info.enabled}">
+  <tc:gridLayout rows="auto auto auto 1fr" rendered="#{info.enabled}">
 
     <tc:in label="Test Category" value="#{universalLoggingInfo.testCategory}"/>
     <tc:button label="Update" action="#{universalLoggingInfo.update}"/>
 
     <tc:separator/>
 
-    <tc:gridLayout columns="auto;120px;auto;*">
+    <tc:gridLayout columns="auto 120px auto 1fr">
 
       <tc:label value="JUL" tip="Java Util Logging"/>
       <tc:selectBooleanCheckbox value="#{universalLoggingInfo.jul.available}" readonly="true"
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/main.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/main.xhtml
index 4a1fe2e..99a7040 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/main.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/main.xhtml
@@ -49,7 +49,7 @@
               <ui:include src="/navigation.xhtml"/>
             </tc:panel>
 
-            <tc:flexLayout rows="auto;*">
+            <tc:flexLayout rows="auto 1fr">
 
             <tc:messages id="messages" orderBy="severity" rendered="#{!hideGlobalMessages}"/>
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/menu.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/menu.xhtml
index 2c7902d..0fae968 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/menu.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/menu.xhtml
@@ -24,7 +24,7 @@
   <!-- tbd: how to solve this? -->
 
 <!--
-  <tc:flexLayout columns="auto;*" alignItems="center">
+  <tc:flexLayout columns="auto 1fr" alignItems="center">
 
     <tc:image value="image/feather-leaf.png"/>
 -->
@@ -110,9 +110,9 @@
       </tc:form>
 
       <f:facet name="after">
-        <tc:flexLayout columns="auto;auto">
+        <tc:flexLayout columns="auto auto">
           <tc:form>
-            <tc:flexLayout columns="200px;auto">
+            <tc:flexLayout columns="200px auto">
               <tc:in placeholder="Search" labelLayout="skip"/>
               <tc:button defaultCommand="true" omit="true" label="go">
                 <tc:dataAttribute name="alert-text" value="Sorry: Search not implemented"/>
@@ -120,7 +120,7 @@
             </tc:flexLayout>
           </tc:form>
           <tc:form id="navbtns">
-            <tc:flexLayout columns="auto;auto">
+            <tc:flexLayout columns="auto auto">
               <tc:buttons>
                 <tc:button immediate="true" id="previous"
                            image="fa-angle-left"
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/server-info.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/server-info.xhtml
index d0fd84a..73d31e4 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/server-info.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/server-info.xhtml
@@ -62,7 +62,7 @@
 
     <tc:section label="System Properties">
 
-      <tc:sheet var="entry" value="#{info.systemPropertiesAsList}" columns="*;2*" rows="1000">
+      <tc:sheet var="entry" value="#{info.systemPropertiesAsList}" columns="1fr 2fr" rows="1000">
         <tc:column label="Key">
           <tc:out value="#{entry.key}"/>
         </tc:column>

-- 
To stop receiving notification emails like this one, please contact
"commits@myfaces.apache.org" <co...@myfaces.apache.org>.