Malla 中的样式就是普通 CSS，上面加了一层可视化编辑器。每个控件都会写入一个真实的 CSS 属性，按断点和状态区分，所以 CSS 能做到的，你的站点都能做到。
布局类型
每个框架都要在检查器的 Layout 分区中选择一种布局类型。
StackFlexbox。子元素按行或列排列，可设置间距、对齐和分布。拖拽即可调整顺序。
GridCSS 网格。设置列数和间距，子元素按顺序填入单元格。
Free子元素以绝对定位放在你放下的位置，适合重叠或需要精细编排的布局。
样式分区
检查器只显示适用于当前选中内容的分区。
Layout布局类型、方向、对齐、分布、间距、列、内边距、外边距。
Size宽度和高度（固定、填充、适应、自动或相对），最小值和最大值，溢出。
Positionstatic、relative、absolute、fixed 或 sticky，以及偏移量和 z-index。
Typography字体、字重、字号、行高、字间距、对齐、颜色。
Fill背景色、渐变和图片，可使用令牌标签。
Border每条边和每个角的宽度、样式、颜色和圆角。
Effects不透明度、阴影、内阴影、图层模糊和背景模糊、变换、光标。
Visibility显示、隐藏，或把可见性绑定到表达式。
数值字段支持单位（px、%、rem、vh…）以及 auto 等关键字。拖动字段的标签即可快速调整数值。
断点
先为桌面设计，再为较小的屏幕覆盖样式。在工具栏中选择一个断点：之后的每次编辑都只写入该断点。如果某个值在当前断点被覆盖，控件上会显示一个圆点，点击重置按钮即可移除覆盖。
| 断点 | 生效条件 | 画板宽度 |
|---|---|---|
| 桌面（基础） | 始终生效，除非被覆盖 | 1440 px |
| 平板 | 视口 ≤ 991 px | 768 px |
| 手机 | 视口 ≤ 767 px | 390 px |
状态
样式分区上方的状态栏可在 Default、Hover、Focus 和 Active 之间切换。在某个状态下设置的值，只在元素处于该状态时生效，并且同样按断点区分。
样式写到哪里
类栏中的样式目标决定你的编辑改的是什么：元素自己的局部样式，还是它的某个类。编辑类时，所有使用该类的元素都会变化。局部样式的优先级始终高于类。参见类与令牌。
数据驱动的样式
任何样式值都可以绑定到表达式，例如随库存变化的颜色，或由进度值决定的宽度。绑定的样式会编译为在运行时为每个元素设置的 CSS 变量，所以其余 CSS 仍然是静态且可缓存的。参见绑定。
底层原理
样式以 camelCase 形式的 CSS 属性保存，并按断点和状态分组：
json
"styles": {
"base": { "display": "flex", "gap": "12px", "paddingBlock": "120px" },
"base:hover": { "opacity": "0.9" },
"tablet": { "paddingBlock": "80px" },
"mobile": { "flexDirection": "column", "paddingBlock": "64px" }
}