From 7577bcb0f9f2d54cdf656bc6afe5886a3055ef39 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Wed, 10 Sep 2025 14:48:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20grid=E5=B8=83=E5=B1=80=EF=BC=8C?=
 =?UTF-8?q?=E9=97=AD=E5=8C=85=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/cbFunc.vue |  14 ++++
 src/views/demo/grid.vue   | 141 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 155 insertions(+)
 create mode 100644 src/views/demo/cbFunc.vue
 create mode 100644 src/views/demo/grid.vue

diff --git a/src/views/demo/cbFunc.vue b/src/views/demo/cbFunc.vue
new file mode 100644
index 0000000..2133d54
--- /dev/null
+++ b/src/views/demo/cbFunc.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>闭包测试</div>
+</template>
+
+<script setup>
+function outer() {
+    let outerMsg = '我是外层数据';
+    return function inner() {
+        console.log(outerMsg);
+    };
+}
+let innerRef = outer();
+innerRef();
+</script>
diff --git a/src/views/demo/grid.vue b/src/views/demo/grid.vue
new file mode 100644
index 0000000..2fa0421
--- /dev/null
+++ b/src/views/demo/grid.vue
@@ -0,0 +1,141 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card header="均分">
+            <div class="grid-container-1">
+                <div
+                    v-for="item in 10"
+                    :key="item"
+                >
+                    item{{ item }}
+                </div>
+            </div>
+        </el-card>
+        <el-card header="横向1:2，纵向1:2:60px(固定值)">
+            <div class="grid-container-2">
+                <div
+                    v-for="item in 6"
+                    :key="item"
+                >
+                    item{{ item }}
+                </div>
+            </div>
+        </el-card>
+        <el-card header="模拟键盘, 横向4列，纵向4行，且合并最后一列1，2行和3，4行">
+            <div class="grid-container-3">
+                <div
+                    v-for="item in 14"
+                    :key="item"
+                >
+                    item{{ item }}
+                </div>
+            </div>
+        </el-card>
+        <el-card header="模拟页面布局，header, sidebar, main, footer">
+            <div class="grid-container-4">
+                <div
+                    v-for="item in data"
+                    :key="item"
+                    :class="item"
+                >
+                    {{ item }}
+                </div>
+            </div>
+        </el-card>
+        <!-- 练习5，这里宽高使用我默认的800*300 -->
+        <el-card header="练习 5：响应式网格布局，具有可变列宽和嵌套网格">
+            <div class="grid-container-5">
+                <div
+                    v-for="item in 12"
+                    :key="item"
+                >
+                    item{{ item }}
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const data = ref(['header', 'sidebar', 'main', 'footer']);
+</script>
+
+<style lang="scss" scoped>
+.el-card__body > div {
+    display: grid;
+    width: 800px;
+    height: 300px;
+    margin: 0 auto;
+    gap: 10px;
+
+    & > div {
+        background-color: #f0f0f0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 10px;
+    }
+}
+.grid-container-1 {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+}
+
+.grid-container-2 {
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: 1fr 2fr 60px;
+}
+
+.grid-container-3 {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+
+    & > div:nth-child(4) {
+        // 第4列开始
+        grid-column: 4;
+        /**
+         * grid-row: 1 / 3
+         * 表示第一行开始，第三行结束（不包含第三行），实现效果为合并第一行和第二行
+         * CSS Grid使用左闭右开区间([1,3))，即包含第1行，不包含第三行
+         *
+         * grid-row: 1 / span 2
+         * 表示第一行开始，一共占据两行，实现效果为合并第一行和第二行，与上面一样，推荐这种写法
+         */
+        // grid-row: 1 / 3;
+        grid-row: 1 / span 2;
+    }
+    & > div:nth-child(11) {
+        grid-column: 4;
+        // grid-row: 3 / 5;
+        grid-row: 3 / span 2;
+    }
+}
+
+.grid-container-4 {
+    grid-template-columns: 200px 1fr;
+    grid-template-rows: 40px 1fr 60px;
+    .header {
+        grid-row: 1;
+        grid-column: 1 / span 2;
+    }
+    .footer {
+        grid-row: 3;
+        grid-column: 1 / span 2;
+    }
+}
+
+.grid-container-5 {
+    grid-template-columns: 25% 30% 20% 25%;
+    grid-template-rows: repeat(4, 1fr);
+
+    & > div:nth-child(5) {
+        grid-column: 1 / span 2;
+        grid-row: 2;
+    }
+    & > div:nth-child(12) {
+        grid-column: 1 / span 4;
+        grid-row: 4;
+    }
+}
+</style>