圣杯布局是一种很常见的css布局。要求：
- 上部和下部各自占领屏幕所有宽度。
- 上下部之间的部分是一个三栏布局。
- 三栏布局两侧宽度不变，中间部分自动填充整个区域。
- 中间部分的高度是三栏中最高的区域的高度。
我会用三种方法来实现圣杯布局，分别是浮动，flexbox以及css grid：
HTML内容：
<div class="header">这里是头部</div>
<div class="container">
<div class="middle">中间部分</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">这里是底部</div>浮动：
1.填充三栏
这一步骤，首先给底部区域清除浮动，防止跟随上边的区域一起浮动。
另外：把中，左，右三个区域设置成度浮动。给左右两块区域固定的宽度，中间部分的宽度设置成100%。
这样实现下来，因为浮动的关系，[middle]会占据[container]的所有部分，而左右两块区域都会被挤到下面，但是，由于第一步设置了内边距的关系，[container]的左右各剩余了一块区域，且宽度与左右区域相同。
.header,.footer{
height:40px;
width:100%;
background:red;
}
.footer{
clear:both;
}
.container{
padding-left:200px;
padding-right:300px;
}
.container div{
float:left;
}
.middle{
width:100%;
background:yellow;
}
.left{
width:200px;
background:pink;
}
.right{
width:300px;
background:aqua;
}
2.移动左侧区域
接下来要做的就是把左右两块区域挪到空出来的内边距空间里去。
先移动左边，新加一个样式 margin-left:-100%。这样一来，因为浮动关系，就把左边块上移到了[middle]左侧，与其交织在一起，而右侧栏就自动往左移动。然后再给左侧栏一个偏移量，偏移量恰好是其宽度，这一步要给[container]的position设成relative
.header,.footer{
height:40px;
width:100%;
background:red;
}
.footer{
clear:both;
}
.container{
padding-left:200px;
padding-right:300px;
}
.container div{
postion:relative;
float:left;
}
.middle{
width:100%;
background:yellow;
}
.left{
width:200px;
background:pink;
margin-left:-100%;
right:200px;
}
.right{
width:300px;
background:aqua;
}
3.移动右边
同上一步的原理一样，把右侧区域也给弄上去，设置负外边距和本身宽度相同就行了。
.header,.footer{
height:40px;
width:100%;
background:red;
}
.footer{
clear:both;
}
.container{
padding-left:200px;
padding-right:300px;
}
.container div{
postion:relative;
float:left;
}
.middle{
width:100%;
background:yellow;
}
.left{
width:200px;
background:pink;
margin-left:-100%;
right:200px;
}
.right{
width:300px;
background:aqua;
margin-right:-300px;
}
flexbox弹性盒子实现：
很简单，在写html的时候，因为不再涉及到浮动，只需要按照左中右的顺序来写就可以了。左右两块区域的宽度写死，把中间的区域的flex属性设置成1就可以了。
.header,.footer{
height:40px;
width:100%;
background:red;
}
.container{
display: flex;
}
.middle{
flex: 1;
background:yellow;
}
.left{
width:200px;
background:pink;
}
.right{
background: aqua;
width:300px;
}
css grid网格
grid是一种新的布局方式，截止2018年初，绝大多数浏览器都已经支持css grid。
其原理就是把页面的区域划分成一个一个的网格，就和围棋的棋盘一样。
用网格来解决圣杯问题，可以摆脱弹性盒子时需要格外加一个[container]的问题，也就是左中右三款区域不需要在他们外边包装一个额外的div。
body{
display: grid;
}
#header{
background: red;
grid-row:1;
grid-column:1/5;
}
#left{
grid-row:2;
grid-column:1/2;
background: orange;
}
#right{
grid-row:2;
grid-column:4/5;
background: cadetblue;
}
#middle{
grid-row:2;
grid-column:2/4;
background: rebeccapurple
}
#footer{
background: gold;
grid-row:3;
grid-column:1/5;
}grid-row就是说由上到下，#header占据第1格，#left,#middle,#right占据第2格，#footer占据第3格。
而grid-column表示，在横向从左向右，分成了五格。其中#header和#footer占据全部。#left占据第1格，#middle占据第2到第4格，#right占据第5格。
原文地址：https://www.cnblogs.com/jayfeng/p/12108567.html