本文介绍了网页布局的历史演变，从早期的position+display+float到Flex布局，再到Grid布局的兴起。重点讨论了Grid布局如何解决多内容区域的自适应宽度和自动缩放问题，通过实例展示了如何利用grid-template-columns和grid-template-rows属性实现二维网格布局，以适应不同宽度需求。文章以Docker Labs的布局为例，引导读者理解并尝试解决三个内容块的排列挑战。
网页布局的前身今世
近年来，网页布局逐渐趋于统一化。从最初使用position+display+float来实现，到后来bootstrap3提出的栅格化布局，再到如今大厂经常考的Flex布局，每次改进的出发点都是如何减少布局时的工作量。但每一代都有自己的重大缺陷
| 传统布局 | BootStrap3 | BootStarp4 | Flex |
|---|---|---|---|
| 相当精确，但工作量太大选择单位时，跨设备和缩放无法适应而选取百分比又不是很精确 | 为了兼容IE采用浮动方式实现z-index难以适配 | 采用了伸缩布局方式无法对局部使用 | 一维布局，纵向排列问题较大 |
可见，随着技术的进步，布局问题越来越少了。到Flex的时候，问题基本已经解决的差不多，只需要按照相同思路再设置一个垂直方向即可。在Chrome 57预览版发布时，W3C正式宣布开始支持Grid属性。这是第一个专门为解决布局问题而创建的 CSS 模块
Grid入门
一个典型的文档类网站布局，包括标题栏，主要内容区域，右侧边栏，左侧边栏等，这里以Docker Labs为例
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
