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