直接改 layui-row 的 display 会失效，因其依赖 float + width 实现栅格，改为 grid 后未重写 grid-template-columns 和子项 grid-column，且 layui js 动态操作会覆盖自定义样式。
为什么直接改 layui-row 的 display 会失效
Layui 的 layui-row 默认是 display: block，内部靠 float + width 计算实现 12 列栅格。你如果只给它加 display: grid，但没重写 grid-template-columns 和子项的 grid-column 行为，那所有 layui-col-md-6 类都会被忽略——因为 Grid 容器不会识别这些类名，也不会自动把 “md-6” 解析成 “占 6/12 列”。
更麻烦的是，Layui 的 JS 组件（比如 form.render()、table.init()）会动态插入 wrapper 元素或修改 class，可能覆盖你手写的 Grid 样式。
用 grid-template-areas 替代 layui-col-* 类名映射
不碰原有类名体系，而是新建一层语义化区域容器，让 Grid 负责宏观结构，Layui 组件只当普通子元素塞进去。这样既保留 Layui 的表单验证、弹窗、表格等能力，又获得 Grid 的二维控制权。
常见做法是：在 .layui-layout-body 内部套一个 .dashboard-grid 容器，用 grid-template-areas 划分区域：
.dashboard-grid {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 240px 1fr;
}
.layui-header、.layui-side、.layui-body 这些原生容器，只需加对应 grid-area 值即可归位，完全不依赖 layui-row 或列宽计算。
如何让 layui-form 在 Grid 区域内正确撑满宽度
Layui 表单默认设了 max-width 和固定 padding，放在 Grid 的 1fr 区域里常出现左右留白、内容挤在一起的问题。关键不是调 width，而是重置它的盒模型和内边距：
- 去掉
.layui-form的max-width，让它自然继承父容器宽度 - 把
.layui-form-item的margin-bottom改为gap（需父级设display: grid或flex） - 对
.layui-input、.layui-select等控件统一设width: 100%，并确保box-sizing: border-box - 避免给表单项加
layui-col-*——它们和 Grid 区域嵌套时会产生双重宽度计算冲突
响应式断点必须脱离 Layui 的 md/lg 媒体查询逻辑
Layui 自带的 @media (min-width: 992px) 是硬编码在 CSS 里的，而现代 Grid 布局需要更细粒度的控制，比如在 768px 折叠侧边栏、在 1024px 启用双栏统计卡片。这时不能依赖 layui-col-sm-*，得自己写媒体查询配合 grid-template-areas 切换：
@media (max-width: 768px) {
.dashboard-grid {
grid-template-areas:
"header"
"main"
"footer";
grid-template-rows: 60px 1fr 40px;
}
}
注意：Layui 的 layui-hide-lg 这类类名仍可保留用于隐藏辅助按钮或图标，但布局结构必须由 Grid 的媒体查询接管——否则会出现“样式写了两套，但只有一套生效”的混乱。
真正难的不是写 Grid 代码，而是判断哪些地方该交还给 Layui（比如表单校验逻辑、日期选择器渲染），哪些必须彻底剥离（比如栅格计算、区域定位）。混用边界一旦模糊，computed styles 里就会同时出现 float: left 和 grid-column: 2 / 3，浏览器按层叠顺序执行，结果不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
