Bricks 的布局只有三件事要判断：这段内容要不要占满一行（Section 或 Container）、它内部的子元素怎么排（Flex）、以及要几列（Grid）。判断清这三点，就不需要到处试 padding。
Section 与 Container 的分工
- Section：负责「一段内容的背景与上下留白」。它的宽度是 100%，背景色、上下 padding 写在它身上
- Container：负责「把内容收进可读宽度」。它的最大宽度来自主题设置里的 Content width
常见错误是把背景色写在 Container 上，导致色块不满宽；或者为了变窄一点内容，在 Section 上写 max-width，破坏全站统一。正确层级是：
Section（背景、上下间距）
└ Container（宽度、左右间距）
└ 内容元素一个特例：全屏 Hero 直接在 Section 上设 100vh 与背景，内部再套一个 Container 收窄文字。
Flex：管一条轴
容器 Display 选 Flex，然后只需回答四个问题：
| 问题 | 对应属性 | 常用值 |
|---|---|---|
| 横排还是竖排 | Direction | Row 或 Column |
| 沿主轴怎么放 | Justify Content | Space Between、Center、Flex Start |
| 交叉轴怎么对齐 | Align Items | Center、Stretch、Flex Start |
| 放不下怎么办 | Flex Wrap 加 Gap | Wrap 加 Gap 16-24px |
两个高频坑：
- Bricks 里 Container 默认是 flex 列并且 align-items:center，子元素不写宽度会被内容收缩。正文类元素要给它 width:100%，这是本站踩过的真实坑
- 用 margin 做间距而不是 Gap，是旧写法。Gap 只作用于子项之间，最后一项不会多出空隙，响应式时也更容易统一改
Grid：管网格
需要「几列且等高」时用 Grid，不要写一堆 flex-wrap 再手算宽度。
- Columns 填 2、3、4，或者写 repeat(auto-fit,minmax(280px,1fr)) 让它自适应
- Row Gap 与 Column Gap 分开设，卡片列表的横向间距通常比纵向大
- 跨列用 Column Span（比如第一个卡片占两列），断点里单独改回去
- 对齐用 Justify Items 与 Align Items，单个子项可以覆盖成 align-self
可直接抄的卡片列表写法
教程分类页的「卡片两列、手机一列、图在上文在下」：
- 外层 Container：Display 设 Grid，Columns 设 repeat(auto-fit,minmax(320px,1fr))，Row Gap 24px，Column Gap 24px
- 循环网格（Loop Grid）的数据源选 Posts，设每页数量与分页
- 卡片容器：Display 设 Flex，Direction 设 Column，Align Items 设 Flex Start，背景与圆角写在卡片上
- 卡片里的标题与摘要都写 width:100%，避免被收缩
- 整张卡是一个链接时：给容器套 Link，确认内部没有再套第二个可点元素（嵌套链接 HTML 不合法，浏览器会拆结构）
响应式的正确做法
- 先只写桌面值，然后逐档覆盖差异项，不要三档全写一遍
- 断点里最常改的三样：Grid 列数、Section 上下 padding、字体大小
- 需要换布局顺序时用 Order，而不是复制一份结构隐藏其一
- 移动端慎用固定 px 宽度，一律交给容器与 minmax
怎么调试
- 浏览器 DevTools 里选中元素，看 Computed 的 flex 与 grid 小徽章，比猜快
- Bricks 结构树里按住元素看它父级链，很多「怎么都不居中」是父容器 align-items 在管
- 临时给容器加一个 outline 或背景色，比反复量像素有效
布局问题的根因几乎都在父容器。子元素的 margin 只能救急，改父级的 justify、align、gap 才是解。
把宽度、间距、颜色集中成变量，见 全局样式与变量。