The `<tc:gridLayout>` has a dynamic history.

In Tobago 1 and 2 the `<tc:gridLayout>` was implemented server side. This implementation was very powerful in layout, but has disadvantage in responsiveness.

For Tobago 3 we have alternative layout managers like `<tc:flexLayout>` and `<tc:segmentLayout>`. The `<tc:gridLayout>` was implemented with the help of JavaScript to have a working and quite compatible version, but it was not recommended to use.

The Tobago 4 implementation of the `<tc:gridLayout>` was implemented in CSS and usable with all modern browsers and the Internet Explorer 11.

<tc:box label="Personal Information"> <tc:gridLayout columns="100px 1fr 100px 2fr" rows="auto auto auto auto auto 1fr"> <tc:style minHeight="600px"/> <tc:selectOneChoice label="Salutation" labelLayout="gridLeft"> <f:selectItem itemLabel="none"/> <f:selectItem itemLabel="Mr."/> <f:selectItem itemLabel="Mrs."/> </tc:selectOneChoice> <tc:panel> <tc:gridLayoutConstraint columnSpan="2"/> </tc:panel> <tc:in label="First Name" labelLayout="gridLeft"/> <tc:in label="Last Name" labelLayout="gridLeft"/> <tc:in label="c/o" labelLayout="gridLeft"> <tc:gridLayoutConstraint columnSpan="4"/> </tc:in> <tc:in label="Street" labelLayout="gridLeft"/> <tc:in label="No" labelLayout="gridLeft"/> <tc:in label="ZIP" labelLayout="gridLeft"/> <tc:in label="City" labelLayout="gridLeft"/> <tc:textarea label="Note" labelLayout="gridLeft"> <tc:gridLayoutConstraint columnSpan="4"/> </tc:textarea> </tc:gridLayout> </tc:box> <tc:box label="2-dimensional layout"> <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr"> <tc:style minHeight="600px"/> <tc:box label="#1"> columnSpan=2 <tc:gridLayoutConstraint columnSpan="2"/> </tc:box> <tc:box label="#2"> rowSpan=2 <tc:gridLayoutConstraint rowSpan="2"/> </tc:box> <tc:box label="#3"> rowSpan=2 <tc:gridLayoutConstraint rowSpan="2"/> </tc:box> <tc:box label="#4"/> <tc:box label="#5"> columnSpan=2 <tc:gridLayoutConstraint columnSpan="2"/> </tc:box> </tc:gridLayout> </tc:box> columnSpan=2 rowSpan=2 rowSpan=2 columnSpan=2 <tc:box label="ordering/positioning of the components"> <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr"> <tc:style minHeight="600px"/> <tc:box label="#1"> columnSpan=2 gridColumn=1 gridRow=3 <tc:gridLayoutConstraint columnSpan="2" gridColumn="1" gridRow="3"/> </tc:box> <tc:box label="#2"> rowSpan=2 gridColumn=3 gridRow=2 <tc:gridLayoutConstraint rowSpan="2" gridColumn="3" gridRow="2"/> </tc:box> <tc:box label="#3"> rowSpan=2 gridColumn=1 gridRow=1 <tc:gridLayoutConstraint rowSpan="2" gridColumn="1" gridRow="1"/> </tc:box> <tc:box label="#4"/> <tc:box label="#5"> columnSpan=2 gridColumn=2 gridRow=1 <tc:gridLayoutConstraint columnSpan="2" gridColumn="2" gridRow="1"/> </tc:box> </tc:gridLayout> </tc:box> columnSpan=2 gridColumn=1 gridRow=3 rowSpan=2 gridColumn=3 gridRow=2 rowSpan=2 gridColumn=1 gridRow=1 columnSpan=2 gridColumn=2 gridRow=1