uniapp中实现两栏布局

<template>
    <view class="">
        <view class="grid-container">
            <view class="grid-item" v-for="(item, index) in gridItems" :key="index">
                <view class="">
                    <image style="width: 100%;height: 300rpx;" :src="item.img" mode=""></image>

                </view>
                <view class=""
                    style="padding:20rpx 15rpx 0rpx 20rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
                    <text>{{ item.title }}</text>
                </view>
                <view class="" style="margin-top: 15rpx;padding:0rpx 20rpx 20rpx 20rpx;text-align:left;">
                    <text style="color: #F97D2B ;">￥{{ item.oldpri }}</text>
                    <text
                        style=" padding-left: 15rpx;text-decoration-line:line-through;font-size: 24rpx;color: #999999 ;">￥{{ item.oldpri }}</text>
                </view>
            </view>
        </view>
        <empty v-if="gridItems.length=='0'" :title="'暂无数据 ...'"></empty>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                // 宫格数据
                gridItems: [{
                        img: "/static/images/allIcon/shopbook.png",
                        title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",
                        oldpri: "23.85",
                        newpri: "12"

                    },
                    {
                        img: "/static/images/allIcon/shopbook.png",
                        title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",
                        oldpri: "23.85",
                        newpri: "12"

                    },
                    {
                        img: "/static/images/allIcon/shopbook.png",
                        title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",
                        oldpri: "23.85",
                        newpri: "12"

                    },
                    {
                        img: "/static/images/allIcon/shopbook.png",
                        title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",
                        oldpri: "23.85",
                        newpri: "12"

                    },
                    {
                        img: "/static/images/allIcon/shopbook.png",
                        title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",
                        oldpri: "23.85",
                        newpri: "12"

                    },
                    {
                        img: "/static/images/allIcon/shopbook.png",
                        title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",
                        oldpri: "23.85",
                        newpri: "12"

                    },
                    {
                        img: "/static/images/allIcon/shopbook.png",
                        title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",
                        oldpri: "23.85",
                        newpri: "12"

                    },

                ]
            }
        }
    }
</script>

<style>
    .grid-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /* padding: 20rpx; */
    }

    .grid-item {
        width: calc(50% - 40rpx);
        /* 假设你有2列，并且有间距 */
        margin-bottom: 20rpx;
        background-color: #fff;
        text-align: center;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 15rpx;
    }

    /* 响应式设计，根据屏幕宽度调整宫格列数 */
    @media (max-width: 768px) {
        .grid-item {
            width: calc(50% - 15rpx);
            /* 在小屏幕设备上显示两列 */
        }
    }

    @media (max-width: 480px) {
        .grid-item {
            width: calc(50% - 15rpx);
        }
    }
</style>