Vaadin Web应用开发教程(30):UI布局-GridLayout布局
GridLayout布局使用网格来布置其中的UI组件。每个网格提供行，列来定义。每个UI组件可以占据一个或多个网格。由网格的坐标(x1,y1,x2,y2)来定义。
GridLayout布局内部使用一个游标(cursor)来记录当前的网格位置，GridLayout布局添加UI组件的顺序为从左到右，从上到下。如果游标越过当前网格的右下角，GridLayout布局自动添加一行。
下例为GridLayout布局的基本用法，addComponent 第一个参数为所添加的UI组件对象，第二个参数可选，指定UI组件添加的网格坐标。可以使用单个坐标或是一个区域。网格坐标从0开始。
GridLayout布局缺省使用“未定义”宽度和高度，因此缺省自适应其所包含的UI组件。如果使用指定大小或是比例，其可使用的选项类同Vaadin Web应用开发教程(29):UI布局-VerticalLayout和HorizontalLayout布局
类似VerticalLayout和HorizontalLayout布局也可以为UI组件指定扩展比例，让某些UI组件占据GridLayout布局剩余空间。可以通过setRowExpandRatio()和setColumnExpandRatio()为行和列分别制定扩展（权重）比例。第一个参数为行或列的坐标，第二个参数为权重。
如下例：
