布局是 Bricks 搭页面的骨架。理解 Container、Flex、Grid 这些布局工具，才能做出规整不乱的页面。本文讲布局核心概念。
布局的层级
Bricks 布局沿 Section → Container → Element 嵌套。Section 占满整行，Container 是内容容器（控制最大宽度与内边距），Element 是具体元素。
Flex 弹性布局
Container 默认用 Flex（弹性盒）：可设横向/纵向排列、对齐方式（头/中/尾）、间距（gap）。做导航、卡片横排、居中对齐都靠它。
Grid 网格布局
需要多列等宽（如产品网格、图片墙）时用 Grid：设定列数、列宽、行距，元素自动填入格子，响应式断点也好调。
间距与对齐
- 用 padding/margin 控制内外边距，别用空 div 撑高度。
- 对齐用 Flex 的对齐属性，而不是硬塞 margin。 掌握这两点，页面就稳。
小结
Bricks 布局三件套：Container 打底、Flex 排方向、Grid 做多列。先把 Section→Container→Element 的层级和 Flex/Grid 用顺，搭页面才不费劲。
内容说明（整理稿）：本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程（源多为截图驱动教程，正文极薄），内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理，非原文逐字翻译，也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准，实操前建议对照官方文档核对。
延伸阅读
Bricks Layout 布局详解——Section / Container / Block / Div 四件套与 Flexbox
教程：Bricks 的四种布局元素 Section、Container、Block、Div 各用在哪？Flexbox 的换行、方向、对齐、间距怎么设？一篇理顺。
tutorialBricks CSS Grid 布局完全指南：grid-template 与可视化栅格构建器（Visual Grid Builder）
教程：从 Bricks 1.6.1 起，任意布局元素都能用 CSS Grid 做二维布局。本文讲清 Grid Container / Grid Item、grid-template-columns/rows、fr 单位、implicit grid、minmax、auto-fill/auto-fit、repeat，以及 Visual Grid Builder 的可视化拖拽、断点与查询循环支持。
tutorialBricks 的侧边栏
教程：博客、文档常要在正文旁放侧边栏。讲清 Bricks 处理侧边栏的两条路——接原生小工具，或用容器加 Query Loop 自建。
tutorial在 Bricks 中创建可变宽度的全宽网格布局
教程：在 Bricks 中用 CSS Grid 命名区域实现 700px 居中正文 + 宽/更宽/全宽/侧栏多档可变宽度布局，含完整 CSS 与 PHP 代码。