display: layout(custom-name) 不合法，浏览器直接忽略；display 值必须是预定义关键字（如 flex、grid），不支持自定义函数语法，正确做法是用标准 display 值配合类名和 css 变量实现可复用布局。

display: layout(custom-name) 不是合法的 CSS 值，浏览器会直接忽略它。这是初学者常踩的坑——把自定义布局名（比如 custom-name）误当成 display 的标准关键字。

---

display 不支持自定义名称参数

CSS 的 display 属性值是预定义的枚举集合，例如 block、flex、grid、inline-block 等。
W3C 规范中 没有 layout() 函数语法，也不允许传入任意字符串作为参数。
你看到的类似写法，通常源于以下混淆：

• 把 CSS 自定义属性（--custom-name）或 JS 动态类名当成了 display 的取值
• 误读了某些 UI 框架（如 Angular Material、Blazor）的模板语法，它们可能用 layout="custom" 作为 HTML 属性，但那不是 CSS display
• 混淆了旧版 IE 的私有 display: -ms-flexbox 或实验性前缀写法（已废弃）

---

真正可扩展“自定义布局”的替代路径

如果你想要封装一套可复用的布局逻辑，应使用组合方式，而非幻想 display: layout(...)：

• 使用 display: flex 或 display: grid 作为基础容器，再通过类名控制行为
• 用 CSS 自定义属性（--gap、--columns）驱动样式变化
• 配合 @apply（仅 Tailwind 或 PostCSS 插件支持，非原生 CSS）

例如，想实现一个叫 sidebar-main 的双栏布局：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

.layout-sidebar-main {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--layout-gap, 16px);
}

然后在 HTML 中：

<div class="layout-sidebar-main">
  <aside>侧边栏</aside><main>主内容</main>
</div>

这样才是可维护、可调试、浏览器真正认的写法。

---

容易被忽略的关键点

• 浏览器开发者工具里看到 display: layout(custom-name) 被划掉（strikethrough），就说明它无效，别试图“加前缀”或“换引号”来修复
• display 的值不能拼接、不能计算、不能由 JS 字符串注入后生效（除非你用 JS 动态设置整个 style.display 为合法值）
• 如果你在某个文档里看到 display: layout(...) 示例，大概率是伪代码、框架 DSL 或过时资料，不要照抄

真要抽象布局，靠的是类名 + 标准 display 值 + CSS 变量，而不是给 display 加括号。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！