Grid

Grid布局就是将每一行划分成12个单位，不论屏幕的宽度是多少。

尺寸有可能是XL Large Medium Small大尺寸，中尺寸，小尺寸。


defualtspan: 设置整个grid默认的排列方式

defaultintent:设置网格元素的头间距

hSpacing/vSpacing 设置当前每一个网格的水平间距和上下间距，可以设定0，0.5，1，2

<l:Grid defaultSpan="L2 M6 S12" hSpacing="2"  vSpacing="2" class="sapUiSmallMarginTop">
  <l:content>
    <!-- Third / Half width items -->
    <ObjectListItem id="productitem-small-0" title="{Name}" intro="{Category}"
      icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
    <ObjectListItem id="productitem-small-1" title="{Name}" intro="{Category}"
      icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
    <ObjectListItem id="productitem-small-2" title="{Name}" intro="{Category}"
      icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
    <ObjectListItem id="productitem-small-3" title="{Name}" intro="{Category}"
      icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
    <ObjectListItem id="productitem-small-4" title="{Name}" intro="{Category}"
      icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
    <ObjectListItem id="productitem-small-5" title="{Name}" intro="{Category}"
      icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
    <!-- Half/Full width items -->
    <ObjectListItem id="productitem-large-0" title="{Name}" intro="{Category}"
      icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }">
      <layoutData>
        <l:GridData span="L6 M12 S12"/>
      </layoutData>
    </ObjectListItem>
    <ObjectListItem id="productitem-large-1" title="{Name}" intro="{Category}"
      icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }">
      <layoutData>
        <l:GridData span="L6 M12 S12"/>
      </layoutData>
    </ObjectListItem>
  </l:content>
</l:Grid>

这里的defaultSpan="L2 M6 S12"意思就是在Large大尺寸时每一个元素占两个单位（每行有6个元素），在Medium中尺寸时每一个元素占6个单位（每行有2个元素），在Small小尺寸时每一个元素占12个单位（每个元素是一行）。