羊了个羊的Grid布局强大吗？长尾词：羊了个羊的Grid布局如何应对复杂游戏场景？

本文共计2878个文字，预计阅读时间需要12分钟。

目录 + Grid布局中的概念 + 几个函数、单位 + auto-fill 与 auto-fit 的区别 + Grid布局与其他布局的区别 + 网格线编号布局 + 网格线名称布局 + 网格区域名称布局 + Grid布局的交叉线对齐 + 对齐元素到块的对齐属性

目录

• Grid布局中的概念
• 几个函数、单位
• auto-fill 与 auto-fit的区别
• Grid布局和其他布局的区别
• 网格线编号布局
• 网格线名称布局
• 网格区域名称布局
• Grid布局轴线对齐
• 对齐元素到块轴的属性是align-items align-self
• 对齐元素到行轴的属性是justify-items justify-self
• 对齐网格轨道到块轴的属性是 align-content
• 对齐网格轨道到行轴的属性是 justify-content
• 布局示例

Grid布局中的概念

Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid布局远比Flex布局强大。