CSS中的网格和弹性布局
内容提要
Flexbox和网格布局是强大的布局方式，适用于不同的排列需求。Flexbox适用于单行或单列排列元素，特别适用于大小未知的元素或容器。网格布局适用于同时将元素排列成行和列，适合创建复杂布局。auto-fill和auto-fit关键字控制网格在容器中的行为。subgrid用于将网格项作为网格容器，并与父网格对齐。容器查询用于根据容器宽度进行响应式设计。
延伸解读
Flexbox与Grid的适用场景
Flexbox是一维布局模型，适合单行或单列排列元素，尤其当元素或容器尺寸未知时非常有用，常用于导航栏、侧边栏或工具栏。Grid是二维布局模型，能同时处理行和列，适合构建复杂页面布局。选择时需根据布局维度决定：一维用Flexbox，二维用Grid。
auto-fill与auto-fit的区别
auto-fill和auto-fit都用于控制网格在容器中的行为。auto-fill会创建尽可能多的轨道，剩余空间均匀分配；auto-fit同样创建尽可能多的轨道，但会折叠空轨道，避免网格末尾出现空白。两者在minmax(100px, 1fr)等场景下表现不同，需根据是否需要保留空轨道来选择。
subgrid的用途与限制
subgrid允许网格项作为网格容器，并与父网格对齐，适用于嵌套网格需要与父网格对齐的场景。但文章指出，subgrid并非在所有浏览器中广泛支持，使用时需考虑兼容性。
容器查询与媒体查询的关系
容器查询根据容器宽度进行响应式设计，而媒体查询考虑视口宽度。容器查询规则仅对容器后代生效，不影响容器本身。文章强调，容器查询是响应式设计的补充，而非媒体查询的替代品，两者可结合使用。
Q&A
Flexbox和网格布局有什么区别？
Flexbox是单维布局，适合单行或单列排列元素；而网格布局是二维布局，适合同时排列行和列。
如何使用auto-fill和auto-fit关键字？
auto-fill会创建尽可能多的列，并均匀分配剩余空间；auto-fit也创建列，但会折叠空列。
什么是subgrid，它有什么用？
subgrid用于将网格项作为网格容器，并与父网格对齐，适合嵌套网格布局。
如何使用容器查询进行响应式设计？
容器查询根据容器宽度进行响应式设计，考虑容器的宽度而非视口宽度。
Flexbox适合哪些布局场景？
Flexbox适合创建导航栏、侧边栏或工具栏，尤其是当元素大小未知时。
网格布局如何处理复杂页面布局？
网格布局可以同时处理行和列，适合构建复杂的页面布局。
