CSS Grid 与 Flexbox 在 Wix Studio 中的深度排版实战 | Wix Studio 中文学习平台

30秒核心速览 (Executive Summary)

如果你熟悉 Figma 的 Auto Layout，那么 Wix Studio 的 Stack（堆叠容器） 和 CSS Grid（网格） 会让你如虎添翼。

掌握两者的黄金协作原则：宏观骨架用 Grid（二维控制行与列），微观内容用 Stack（一维控制横向或纵向自动间距排列）。这种架构能彻底杜绝绝对定位导致的元素挤压重叠和移动端错乱。

1. CSS Grid 与 Flexbox 在 Studio 中的分工矩阵

CSS Grid (网格容器 - 二维布局)

适合构建页面宏观结构，如 Bento 卡片网格、12 列设计栅格、不规则图文交织混排。可以精准定义每一个单元格占据几行几列（fr 或 %）。

Stack (Flexbox 堆叠 - 一维流式)

适合构建局部微观内容，如：头像+标题+描述+按钮的垂直组合，或者标签组、导航链接的水平排列。自带统一的 Gap 间距设定。

在任何 Section 选中后，点击右侧检查器的 Layout -> Grid，即可添加 12 默认列栅格。

在画布中同时选中两个或多个元素（例如一个小图标、一个标题和一段正文），按下快捷键 Shift + A 或点击悬浮栏上的 Stack 按钮：

Stack 核心优势：

1. 文字增减自适应： 当客户修改正文长度时，下方按钮会自动向下平滑顺延，绝不会发生文字覆盖在按钮上的惨剧；

2. 一键切换方向： 桌面端横向排列（Horizontal），在手机端一键切换为垂直排列（Vertical）；

3. 统一内边距： 支持四周统一定义 Padding，保证组件内部留白呼吸感一致。

当需要展示服务项目、团队成员、博客卡片或产品特性时，切勿手动复制 4 个普通容器！应当使用 Repeater（重复项组件）：

在 Repeater 中，您只需设计第 1 个项（Item 1），其余各项会自动同步结构、字体与动画。后续连接 CMS 数据库或 Velo 代码时，Repeater 能自动根据数据行数无缝展开，极大地减少了重复劳动。

避坑 1：桌面端 4 列 Grid 继承到手机未拆行

现象： 4 张产品卡片在手机端被强行挤在 390px 宽度内，文字细成单列字。解法： 切换至 Mobile 断点，在 Grid 设置面板将列数由 4 改为 1（或 2），系统会自动按 1 列纵向垂直流动，不会影响桌面端。

避坑 2：在 Stack 内部随意使用绝对定位

现象： 元素在 Stack 内部被拖拽脱离流式排列，导致文字变多时其他兄弟元素被遮挡。解法： Stack 内部的对齐应完全交由 Align items 与 Spacing 处理，严禁强行设定绝对坐标。

关于网格布局与 Flexbox 容器的详细官方文档与进阶属性：

官方关于在 Section 切分自定义网格行列、设置 fr 比例及跨单元格布局的权威指南。

官方对 Flexbox 弹性布局容器与 Stack 自动流式排版的完整操作规程。

如何使用 Repeater 搭建结构统一的动态列表，并与 CMS 集合及数据集无缝绑定。

Q：如何让 Repeater 中的所有卡片保持高度一致？

选中 Repeater 后，在 Inspector 中将其每一项的 Item Height 设置为 100%，内部容器的高度行为同样设置为自适应拉伸，短文本卡片就会自动与最长文本卡片等高对齐。

Q：在移动端想调换图文左右顺序（左图右文变成上图下文），该怎么做？

如果使用 Stack，切换为纵向后，可直接在图层面板中拖拽上下顺序；如果使用 Grid，在移动端断点下直接拖拽单元格即可自动触发 order 重排，完全不影响桌面端显示。