前言
开门见山，圣杯布局和双飞翼布局都是为了实现两边定宽,中间自适应的布局，只是在实现的方法上有些许不同，因此不要被这两个奇怪叫法的东西迷惑了。事实上，圣杯布局和双飞翼布局在设计思路上也有些相似之处，我将会一步步带领大家认识，并在后面为大家总结。
如果想了解掌握什么是传统模型、flex、grid布局，可以看看上一篇文章：
传统模型、Flex和Grid布局
如果感觉这两个布局理解起来较难，那么你可能是新人，可以看看另外一篇文章：
左右布局（传统模型、flex、grid的实现）
圣杯布局
HTML
<main>
<div class="center contain">center</div>
<div class="left contain">left</div>
<div class="right contain">right</div>
</main>
消除浏览器默认：
html,body{
padding: 0;
margin: 0;
}
首先，我们先设置三个div的统一高度和float属性；并且设置center的width为100%，left和right的width为100px；
.contain{
float: left;
height: 300px;
}
.center{
background-color: bisque;
width: 100%;
}
.left{
background-color: rebeccapurple;
width: 100px;
}
.right{
background-color: salmon;
width: 100px;
}
接着我们要想办法将 left 先进入到 center 的左边，注意这里说的是“进入”，看图中的文字“center”消失就理解了，这里用margin-left:-100%，-100%是要让 left 的左外边距向左移动父元素的宽的100%，因为 center 的宽度为100%
同理，我们将 right 进入到 center 的右边，这里margin-left:-100px，得到
到这里会发现基本成型了，但是别忘记 center 还有部分被遮挡，于是将整个父元素的内容层压缩
main{
padding: 0 100px;
}
如下，仔细观察多出来的空白部分
接着我们只需要把左右两个 div 移动到两边的位置
.left{
position: relative;
left:-100px;
}
.right{
position: relative;
left:100px;/*也可以right:-100px*/
}
这样就完成了我们圣杯布局啦~鼓励鼓励！！！
效果图就是开头那个，就不截图了，希望大家到这里能自己实操一下
双飞翼布局
其实双飞翼和圣杯布局前期做的事情都一样，即做到文字图1-3的效果，为了不被说是凑字数，滑动指头回去瞄一眼呗。
由图1-3中基本成型的布局中，我们要思考另外一种方式令 center 不再被遮挡，因此不同于圣杯布局的就是针对 center 自身进行改变，那么就给 center 增加一个子元素
<div class="center contain">
<div class="center-child">
center-child
</div>
</div>
通过对子元素设置左右外边距：margin:0 100px，便能达到想要的结果。
因此，我们知道圣杯布局是在三个 div 并列后调整了父元素的内边距padding属性后移动左右两边的 div 实现的，而双飞翼布局则是在并列后在 center 中添加多一个子元素并对子元素进行外边距margin属性的调整实现的，其目的都只是为了解决中间的 div 层被遮挡的问题，那么下面我们将分别用 flex 和 grid 布局对这种三栏布局进行实现
flex实现
html
<main>
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</main>
CSS
main{
display: flex;
height: 300px;
}
#center{
background-color: bisque;
order: 0;
flex: 1;
}
#left{
background-color: rebeccapurple;
order: -1;
width: 100px;
}
#right{
background-color: salmon;
order: 1;
width: 100px;
}
其中，容器设置display: flex，中间栏需要自适应则flex: 1，另外order属性能定义排列顺序。
grid实现
main{
display: grid;
height: 300px;
grid-template-columns: 100px auto 100px;
grid-template-areas: "left center right";
}
#center{
background-color: bisque;
grid-area: center;
}
#left{
background-color: rebeccapurple;
grid-area: left;
}
#right{
background-color: salmon;
grid-area: right;
}
grid布局相当于在容器设计好整个布局，也就是布局已经固定了，再将项目进行排列。
