聖盃佈局和雙飛翼佈局都是實現的三欄佈局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固佈局。它們實現的效果是一樣的，差別在於其實現的思想。
聖盃佈局的出現是來自於a list part上的一篇文章In Search of the Holy Grail。比起雙飛翼佈局，它的起源不是源於對頁面的形象表達。在西方，聖盃是表達“渴求之物”的意思。而雙飛翼佈局，源與淘寶的UED。
通過縮放頁面就可以發現，隨着頁面的寬度的變化，這三欄佈局是中間盒子優先渲染，兩邊的盒子框子固定不變，即使頁面寬度變小，也不影響我們的瀏覽。
注意：當縮放頁面的時候，寬度不能小於700PX，爲了安全起見，最好還是給body加一個最小寬度!
整體HTML結構代碼如下：
<header><h4>Header內容區</h4></header>
<div class="container">
<div class="middle"><h4>中間彈性區</h4></div>
<div class="left"><h4>左邊欄</h4></div>
<div class="right"><h4>右邊欄</h4></div>
</div>
<footer><h4>Footer內容區</h4></footer>
注意：上述代碼，父元素的的三欄務必先寫中間盒子。因爲中間盒子是要被優先渲染，並且設置其自適應，也就是width:100%。
每個盒子的CSS樣式如下：
header{width: 100%;height: 40px;background-color: darkseagreen;}
.container{ height:200px;overflow:hidden;}
.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
.left{ width: 200px;height: 200px;background-color: blue;float:left;}
.right{width: 200px;height: 200px;background-color: darkorchid;float:left;}
footer{width: 100%; height: 30px;background-color: darkslategray;}
樣式如下：
三欄並沒有在父元素的一行顯示，就是因爲中間盒子給了百分之百的寬度，左右兩個盒子纔會被擠下來。
如果中間盒子不是100%的寬度，按照文檔流，左邊的盒子一定會在中間盒子的後面顯示，接着顯示右邊的盒子。但是現在中間盒子是滿屏了的，所以左右兩個盒子被擠到下一行顯示。
1）讓左邊的盒子上去，設置其左邊距爲負的中間盒子的寬度，也就是.left {margin-left:-100%;}。這樣左盒子纔可以往最左邊移動。
2）讓右邊的盒子上去，設置其左邊距爲負的自己的寬度，也就是.right {margin-left：-200px;}。這樣右盒子纔可以在一行的最右邊顯示出自己。
目前硬性的實現了固比固佈局。但中間盒子是自適應的寬度，所以中間盒子裏的內容會被左右盒子給壓住一部分。比如現在我給中間盒子加很多的內容，大家看看效果圖：
利用父級元素設置左右內邊距的值，把父級的三個子盒子往中間擠。代碼如下：.container{ padding: 0 200px;} 這裏的200px是左右盒子的寬度。
左右兩邊的內邊距是有了，但是中間盒子上的內容還是被壓着。
給左右兩個盒子加一個定位，加了定位之後左右兩個盒子就可以設置left和right值。
代碼如下：
.left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;}
聖盃佈局終於搞定了，也實現了我們要的效果，左右側的盒子固定，中間盒子自適應，而且中間盒子的內容完全不受影響。
聖盃佈局和雙飛翼佈局解決的問題是一樣的，都是兩邊定寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。
兩種方法基本思路都相同：
1）首先讓中間盒子 100% 寬度佔滿同一高度的空間
2）在左右兩個盒子被擠出中間盒子所在區域時，使用 margin-left 的負值將左右兩個盒子拉回與中間盒子同一高度的空間。
3）接下來進行一些調整避免中間盒子的內容被左右盒子遮擋。
主要區別在於如何使中間盒子的內容不被左右盒子遮擋：
聖盃佈局的方法：設置父盒子的 padding 值爲左右盒子留出空位，再利用相對佈局對左右盒子調整位置佔據 padding 出來的空位；
雙飛翼佈局的方法：在中間盒子裏再增加一個子盒子，直接設置這個子盒子的 margin 值來讓出空位，而不用再調整左右盒子。
簡單說起來就是雙飛翼佈局比聖盃佈局多創建了一個div，但不用相對佈局了，少設置幾個屬性。