js-components-grid-col.md

# grid-col<a name="ZH-CN_TOPIC_0000001173164763"></a>

grid-col是栅格布局容器grid-row的子容器组件。

## 权限列表<a name="section11257113618419"></a>

无

## 子组件<a name="section9288143101012"></a>

支持。

## 属性<a name="section1976213199113"></a>

除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：

<a name="table20633101642315"></a>
<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="a45273e2103004ff3bdd3375013e96a2a"><a name="a45273e2103004ff3bdd3375013e96a2a"></a><a name="a45273e2103004ff3bdd3375013e96a2a"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="ad5b10d4a60e44bb4a8bbb3b4416d7b27"><a name="ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a><a name="ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="ab2ae3d9f60d6475ab95ba095851a9d07"><a name="ab2ae3d9f60d6475ab95ba095851a9d07"></a><a name="ab2ae3d9f60d6475ab95ba095851a9d07"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.449999999999999%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="35.83%" id="mcps1.1.6.1.5"><p id="af5c3b773ed0a42e589819a6c8d257ca1"><a name="af5c3b773ed0a42e589819a6c8d257ca1"></a><a name="af5c3b773ed0a42e589819a6c8d257ca1"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row61510615123"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p13694117171213"><a name="p13694117171213"></a><a name="p13694117171213"></a>xs</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p17694191719123"><a name="p17694191719123"></a><a name="p17694191719123"></a>number|object</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p9694171712125"><a name="p9694171712125"></a><a name="p9694171712125"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="p769441711125"><a name="p769441711125"></a><a name="p769441711125"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="p3694217141213"><a name="p3694217141213"></a><a name="p3694217141213"></a>在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}</p>
</td>
</tr>
<tr id="row683183131212"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p15694417181219"><a name="p15694417181219"></a><a name="p15694417181219"></a>sm</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p15694141741210"><a name="p15694141741210"></a><a name="p15694141741210"></a>number|object</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p66941517171212"><a name="p66941517171212"></a><a name="p66941517171212"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="p4694111714123"><a name="p4694111714123"></a><a name="p4694111714123"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="p17694117171211"><a name="p17694117171211"></a><a name="p17694117171211"></a>在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}</p>
</td>
</tr>
<tr id="row1211310592118"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p4694161710123"><a name="p4694161710123"></a><a name="p4694161710123"></a>md</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p569551751220"><a name="p569551751220"></a><a name="p569551751220"></a>number|object</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p86952172121"><a name="p86952172121"></a><a name="p86952172121"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="p3695171711214"><a name="p3695171711214"></a><a name="p3695171711214"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="p66953176126"><a name="p66953176126"></a><a name="p66953176126"></a>在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}</p>
</td>
</tr>
<tr id="row9263155681117"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p10695101717122"><a name="p10695101717122"></a><a name="p10695101717122"></a>lg</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p5695131701217"><a name="p5695131701217"></a><a name="p5695131701217"></a>number|object</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p1469501714124"><a name="p1469501714124"></a><a name="p1469501714124"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="p1769511715127"><a name="p1769511715127"></a><a name="p1769511715127"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="p8695111741217"><a name="p8695111741217"></a><a name="p8695111741217"></a>在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}</p>
</td>
</tr>
<tr id="row1236753141115"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p166957175127"><a name="p166957175127"></a><a name="p166957175127"></a>span</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p1569561741210"><a name="p1569561741210"></a><a name="p1569561741210"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p17695201719121"><a name="p17695201719121"></a><a name="p17695201719121"></a>1</p>
</td>
<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="p156951617101214"><a name="p156951617101214"></a><a name="p156951617101214"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="p1169581712121"><a name="p1169581712121"></a><a name="p1169581712121"></a>在未设置明确断点时，默认占用列数</p>
</td>
</tr>
<tr id="row1348115011117"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p12695141741216"><a name="p12695141741216"></a><a name="p12695141741216"></a>offset</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p0695131711124"><a name="p0695131711124"></a><a name="p0695131711124"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p8695111710129"><a name="p8695111710129"></a><a name="p8695111710129"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="7.449999999999999%" headers="mcps1.1.6.1.4 "><p id="p15695111781220"><a name="p15695111781220"></a><a name="p15695111781220"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="35.83%" headers="mcps1.1.6.1.5 "><p id="p2069531710128"><a name="p2069531710128"></a><a name="p2069531710128"></a>未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数</p>
</td>
</tr>
</tbody>
</table>

## 样式<a name="section1948816404128"></a>

除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：

<a name="table282005513017"></a>
<table><thead align="left"><tr id="row168201855113012"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="p38201055113016"><a name="p38201055113016"></a><a name="p38201055113016"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="12.218778122187782%" id="mcps1.1.6.1.2"><p id="p3820105573010"><a name="p3820105573010"></a><a name="p3820105573010"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="13.03869613038696%" id="mcps1.1.6.1.3"><p id="p1282065593020"><a name="p1282065593020"></a><a name="p1282065593020"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="8.4991500849915%" id="mcps1.1.6.1.4"><p id="p2820455103013"><a name="p2820455103013"></a><a name="p2820455103013"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="43.12568743125688%" id="mcps1.1.6.1.5"><p id="p8820115573010"><a name="p8820115573010"></a><a name="p8820115573010"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row482195519300"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p108211555183011"><a name="p108211555183011"></a><a name="p108211555183011"></a>flex-direction</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p6821185583020"><a name="p6821185583020"></a><a name="p6821185583020"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p108217558305"><a name="p108217558305"></a><a name="p108217558305"></a>row</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p168211655173015"><a name="p168211655173015"></a><a name="p168211655173015"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p18821165563017"><a name="p18821165563017"></a><a name="p18821165563017"></a>flex容器主轴方向。可选项有：</p>
<a name="ul15821145583019"></a><a name="ul15821145583019"></a><ul id="ul15821145583019"><li>column：垂直方向从上到下</li><li>row：水平方向从左到右</li></ul>
</td>
</tr>
<tr id="row1582115513018"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p148211055133015"><a name="p148211055133015"></a><a name="p148211055133015"></a>flex-wrap</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p0821055103010"><a name="p0821055103010"></a><a name="p0821055103010"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p118212557306"><a name="p118212557306"></a><a name="p118212557306"></a>nowrap</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p168211155143015"><a name="p168211155143015"></a><a name="p168211155143015"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p1382145510309"><a name="p1382145510309"></a><a name="p1382145510309"></a>flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：</p>
<a name="ul282175510308"></a><a name="ul282175510308"></a><ul id="ul282175510308"><li>nowrap：不换行，单行显示。</li><li>wrap：换行，多行显示。</li></ul>
</td>
</tr>
<tr id="row782155583013"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p1782175512303"><a name="p1782175512303"></a><a name="p1782175512303"></a>justify-content</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p88219557300"><a name="p88219557300"></a><a name="p88219557300"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p18821855173011"><a name="p18821855173011"></a><a name="p18821855173011"></a>flex-start</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p3821205517302"><a name="p3821205517302"></a><a name="p3821205517302"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p68219555307"><a name="p68219555307"></a><a name="p68219555307"></a>flex容器当前行的主轴对齐格式。可选项有：</p>
<a name="ul782165511302"></a><a name="ul782165511302"></a><ul id="ul782165511302"><li>flex-start：项目位于容器的开头。</li><li>flex-end：项目位于容器的结尾。</li><li>center：项目位于容器的中心。</li><li>space-between：项目位于各行之间留有空白的容器内。</li><li>space-around：项目位于各行之前、之间、之后都留有空白的容器内。</li></ul>
</td>
</tr>
<tr id="row182215556305"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p13822205523020"><a name="p13822205523020"></a><a name="p13822205523020"></a>align-items</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p6822155519300"><a name="p6822155519300"></a><a name="p6822155519300"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p1982215523014"><a name="p1982215523014"></a><a name="p1982215523014"></a>stretch</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p14822655113020"><a name="p14822655113020"></a><a name="p14822655113020"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p17822555103011"><a name="p17822555103011"></a><a name="p17822555103011"></a>flex容器当前行的交叉轴对齐格式，可选值为：</p>
<a name="ul1822185512309"></a><a name="ul1822185512309"></a><ul id="ul1822185512309"><li>stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。</li><li>flex-start：元素向交叉轴起点对齐。</li><li>flex-end：元素向交叉轴终点对齐。</li><li>center：元素在交叉轴居中。</li></ul>
</td>
</tr>
<tr id="row158231551309"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p108231055173010"><a name="p108231055173010"></a><a name="p108231055173010"></a>align-content</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p98231455193012"><a name="p98231455193012"></a><a name="p98231455193012"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p108232055103011"><a name="p108232055103011"></a><a name="p108232055103011"></a>flex-start</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p198231155153019"><a name="p198231155153019"></a><a name="p198231155153019"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p1882312558307"><a name="p1882312558307"></a><a name="p1882312558307"></a>交叉轴中有额外的空间时，多行内容对齐格式，可选值为：</p>
<a name="ul282335519305"></a><a name="ul282335519305"></a><ul id="ul282335519305"><li>flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。</li><li>flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。</li><li>center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。</li><li>space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。</li><li>space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。</li></ul>
</td>
</tr>
<tr id="row782325510307"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p5823355143013"><a name="p5823355143013"></a><a name="p5823355143013"></a>display</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p582325563018"><a name="p582325563018"></a><a name="p582325563018"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p68238557307"><a name="p68238557307"></a><a name="p68238557307"></a>flex</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p182315511303"><a name="p182315511303"></a><a name="p182315511303"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p1482375503018"><a name="p1482375503018"></a><a name="p1482375503018"></a>确定该元素视图框的类型，该值暂不支持动态修改。可选值为：</p>
<a name="ul6823155153010"></a><a name="ul6823155153010"></a><ul id="ul6823155153010"><li>flex：弹性布局</li><li>grid：网格布局</li><li>none：不渲染此元素</li></ul>
</td>
</tr>
<tr id="row382411557307"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p48249553303"><a name="p48249553303"></a><a name="p48249553303"></a>grid-template-[columns|rows]</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p0824115563014"><a name="p0824115563014"></a><a name="p0824115563014"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p7824185512308"><a name="p7824185512308"></a><a name="p7824185512308"></a>1行1列</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p782445523018"><a name="p782445523018"></a><a name="p782445523018"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p1082465513013"><a name="p1082465513013"></a><a name="p1082465513013"></a>用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。</p>
<p id="p18824145520305"><a name="p18824145520305"></a><a name="p18824145520305"></a>示例：如设置grid-template-columns为：</p>
<p id="p68241557304"><a name="p68241557304"></a><a name="p68241557304"></a>(1) 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；</p>
<p id="p4824105513305"><a name="p4824105513305"></a><a name="p4824105513305"></a>(2) 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；</p>
<p id="p128242055163011"><a name="p128242055163011"></a><a name="p128242055163011"></a>(3) 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；</p>
<p id="p282475514306"><a name="p282475514306"></a><a name="p282475514306"></a>(4) repeat(2,100px)：分两列，第一列100px，第二列100px；</p>
<p id="p17824185516300"><a name="p17824185516300"></a><a name="p17824185516300"></a>(5) auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。</p>
</td>
</tr>
<tr id="row1882465518305"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p28241855183010"><a name="p28241855183010"></a><a name="p28241855183010"></a>grid-[columns|rows]-gap</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p6824755103014"><a name="p6824755103014"></a><a name="p6824755103014"></a>&lt;length&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p1282455553014"><a name="p1282455553014"></a><a name="p1282455553014"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p1824125515309"><a name="p1824125515309"></a><a name="p1824125515309"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p88241255183013"><a name="p88241255183013"></a><a name="p88241255183013"></a>用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。</p>
</td>
</tr>
<tr id="row10824135523013"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p882475513307"><a name="p882475513307"></a><a name="p882475513307"></a>grid-row-[start|end]</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p19824205513018"><a name="p19824205513018"></a><a name="p19824205513018"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p7824105523012"><a name="p7824105523012"></a><a name="p7824105523012"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p782445503011"><a name="p782445503011"></a><a name="p782445503011"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p13824115519302"><a name="p13824115519302"></a><a name="p13824115519302"></a>用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。</p>
</td>
</tr>
<tr id="row1582495513010"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p48247556301"><a name="p48247556301"></a><a name="p48247556301"></a>grid-column-[start|end]</p>
</td>
<td class="cellrowborder" valign="top" width="12.218778122187782%" headers="mcps1.1.6.1.2 "><p id="p2825455183011"><a name="p2825455183011"></a><a name="p2825455183011"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="13.03869613038696%" headers="mcps1.1.6.1.3 "><p id="p1382545583012"><a name="p1382545583012"></a><a name="p1382545583012"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="8.4991500849915%" headers="mcps1.1.6.1.4 "><p id="p382515553016"><a name="p382515553016"></a><a name="p382515553016"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="43.12568743125688%" headers="mcps1.1.6.1.5 "><p id="p128256553309"><a name="p128256553309"></a><a name="p128256553309"></a>用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。</p>
</td>
</tr>
</tbody>
</table>

>![](../../public_sys-resources/icon-note.gif) **说明：** 
>-   不支持宽度相关样式。

## 事件<a name="section94351031102113"></a>

支持[通用事件](js-components-common-events.md)。

## 方法<a name="section2279124532420"></a>

支持[通用方法](js-components-common-methods.md)。

## 示例<a name="section2021865273710"></a>

```
<!-- index.hml -->
<div class="container">
  <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
    <grid-row style="height:400px;justify-content:space-around;">
      <grid-col span="1">
        <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
          <text style="color: dodgerblue;" onclick="getCol">內容元素</text>
        </div>
      </grid-col>
      <grid-col span="4" style="background-color:orange;">
        <div style="width: 100%;height: 100%;padding: 20px;align-items: center;">
          <text onclick="getColWidth">內容元素</text>
        </div>
      </grid-col>
    </grid-row>
  </grid-container>
</div>
```

```
/* index.css */
.container {
  flex-direction: column;
  padding-top: 80px;
}
```

```
// index.js
import prompt from '@system.prompt';
export default {
  getCol(e) {
    this.$element('mygrid').getColumns(function (result) {
      prompt.showToast({
        message: e.target.id + ' result = ' + result,
        duration: 3000,
      });
    })
  },
  getColWidth(e) {
    this.$element('mygrid').getColumnWidth(function (result) {
      prompt.showToast({
        message: e.target.id + ' result = ' + result,
        duration: 3000,
      });
    })
  }
}
```

![](figures/44.gif)