圣杯布局 和 双飞翼布局 一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》 。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。
原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览。 注意：为了安全起见，最好还是给body加一个最小宽度!
|
|
【1】浮动
【2】flex弹性盒子
【3】grid布局
如上图所示，我们把body划分成三行四列的网格，其中有5条列网格线
下面这几种布局方式在一些常用界面的制作上都是基础，供参考：1、可复用的高度和宽度都自适应的圆角矩形
2、两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化
3、三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
4、浮动布局
