Grid vs Flex 用于实现类似圣杯的布局
Grid vs Flex for implementations of Holy Grail-like layout
当出现 Sidebar 时，我希望我的布局从此开始：
当 Sidebar 不存在时：
要获得这种效果，我认为三个现代选择是：
单独的网格：有一个 grid 使用 class 这样的 https://codepen.io/rajsinghusa/pen/ExPaXqR 或
Grid+Flex：有 3 行的 grid 布局，有两个 flex 项目
中间一排。或者，
单独使用 Flex：使用 flex 创建 3 行，然后在中创建两列
中间一排。
这三种实现的局限性有何不同？
鉴于您的实现细节，我认为唯一的区别是语义。这三个选项会很好地工作，对于您的用例，我认为 grid 是我会选择的选项，因为它很容易看到不同布局上发生的情况。
并排查看两个声明，布局的工作原理非常清楚：
"header header" "sidebar main" "footer footer"
"header header" "main main" "footer footer"
在这个用例中，我没有看到使用选项 2 或 3 的明显好处。
要牢记的一件重要事情是网格与 flex 相比的行为方式：
Grid is Container-Based, Flexbox is Content-Based
In flexbox layout, the size of a cell (flex-item) is defined inside the flex-item itself,
and in the grid layout, the size of a cell (grid-item) is defined
inside the grid-container.
来源：https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/
根据您希望布局的行为方式、它如何适应不同的屏幕分辨率或不同的内容，最好记住这种差异。同样，我认为 grid 会在这方面提供更多选择。
当出现 Sidebar 时，我希望我的布局从此开始：
当 Sidebar 不存在时：
要获得这种效果，我认为三个现代选择是：
单独的网格：有一个
grid使用class这样的 https://codepen.io/rajsinghusa/pen/ExPaXqR 或Grid+Flex：有 3 行的
grid布局，有两个flex项目 中间一排。或者，单独使用 Flex：使用
flex创建 3 行，然后在中创建两列 中间一排。
这三种实现的局限性有何不同？
鉴于您的实现细节，我认为唯一的区别是语义。这三个选项会很好地工作，对于您的用例，我认为 grid 是我会选择的选项，因为它很容易看到不同布局上发生的情况。
并排查看两个声明，布局的工作原理非常清楚：
"header header" "sidebar main" "footer footer"
"header header" "main main" "footer footer"
在这个用例中，我没有看到使用选项 2 或 3 的明显好处。
要牢记的一件重要事情是网格与 flex 相比的行为方式：
Grid is Container-Based, Flexbox is Content-Based
In flexbox layout, the size of a cell (flex-item) is defined inside the flex-item itself, and in the grid layout, the size of a cell (grid-item) is defined inside the grid-container.
来源：https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/
根据您希望布局的行为方式、它如何适应不同的屏幕分辨率或不同的内容，最好记住这种差异。同样，我认为 grid 会在这方面提供更多选择。