CSS Grid
W3C于2017年正式推出的CSS二维布局规范,支持同时控制行与列两个维度,是现代Web前端布局的核心技术之一
核心事实
时间轴 (近 90 天)
Outlook 2016至2021的Windows版本使用Microsoft Word的渲染引擎而非浏览器引擎,导致Flexbox、CSS Grid等现代布局方式失效,开发者必须退回到嵌套表格写法
公众号多图并排布局通常依赖 CSS Flexbox 或 Grid 布局,且受平台内联样式白名单约束,装饰性文字往往需要绝对定位或浮动布局
Servo 早期使用自研的 Flow 布局引擎,近年来转向重新实现基于 CSS 规范的现代布局系统,包括对 Flexbox 和 CSS Grid 的支持
现代 CSS 拥有 Grid、Flexbox、自定义属性(CSS Variables)、容器查询等能力,可用纯 CSS 完成过去须依赖脚本或结构 hack 的复杂布局
全部知识事实 (7)
CSS Grid于2017年获得主流浏览器支持,提供了真正的二维布局能力
80%待验证在Flexbox和Grid出现之前,开发者主要依赖float属性进行布局,该属性原本设计用于文字环绕图片
90%待验证Subgrid允许子网格继承父网格的轨道定义,解决了嵌套网格对齐的难题
60%待验证Outlook 2016至2021的Windows版本使用Microsoft Word的渲染引擎而非浏览器引擎,导致Flexbox、CSS Grid等现代布局方式失效,开发者必须退回到嵌套表格写法
50%待验证公众号多图并排布局通常依赖 CSS Flexbox 或 Grid 布局,且受平台内联样式白名单约束,装饰性文字往往需要绝对定位或浮动布局
50%待验证Servo 早期使用自研的 Flow 布局引擎,近年来转向重新实现基于 CSS 规范的现代布局系统,包括对 Flexbox 和 CSS Grid 的支持
50%待验证现代 CSS 拥有 Grid、Flexbox、自定义属性(CSS Variables)、容器查询等能力,可用纯 CSS 完成过去须依赖脚本或结构 hack 的复杂布局
50%