<import src="../common/templates/mode-title.swan" />
<view class="grid-container">
    <custom chineseName="宫格" engName="grid"></custom>
    <view class="content">
        <view class="mode-title-container first">
            <template is="mode-title" title="上图下文二宫格模板"></template>
        </view>
        <view class="content-item">
            <smt-grid list="{{list1}}" has-separate-Line="{{false}}"></smt-grid>
        </view>
        <view class="mode-title-container">
            <template is="mode-title" title="上图下文三宫格模板"></template>
        </view>
        <view class="content-item">
            <smt-grid list="{{list2}}" column-num="{{3}}" has-border="{{false}}"></smt-grid>
        </view>
        <view class="mode-title-container">
            <template is="mode-title" title="上图下文四宫格模板"></template>
        </view>
        <view class="content-item">
            <smt-grid list="{{list3}}" column-num="{{4}}" has-border="{{false}}"></smt-grid>
        </view>
        <view class="mode-title-container">
            <template is="mode-title" title="自定义上图下文标题样式"></template>
        </view>
        <view class="content-item">
            <smt-grid list="{{list1}}" has-border="{{false}}" smt-title-class="smt-title-class" smt-sub-title-class="smt-sub-title-class" has-separate-Line="{{false}}"></smt-grid>
        </view>
        <view class="mode-title-container">
            <template is="mode-title" title="左图右文二宫格模板"></template>
        </view>
        <view class="content-item">
            <smt-grid type="horizontal" list="{{list4}}"></smt-grid>
        </view>
        <view class="mode-title-container">
            <template is="mode-title" title="左图右文三宫格模板"></template>
        </view>
        <view class="content-item">
            <smt-grid type="horizontal" list="{{list5}}" column-num="{{3}}" has-border="{{false}}"></smt-grid>
        </view>
        <view class="mode-title-container">
            <template is="mode-title" title="自定义左图右文标题样式"></template>
        </view>
        <view class="content-item">
            <smt-grid type="horizontal" list="{{list5}}" column-num="{{3}}" has-border="{{false}}" smt-title-class="smt-title-class"></smt-grid>
        </view>
    </view>
    <!-- 解决ios 部分机型 margin-bottom 不管用的问题 -->
    <view class="grid-marign-bottom"></view>
</view>