聖杯布局（Holy Grail Layout）指的是一種最常見的網站布局。頁面從上到下，分成三個部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導航、主欄、副欄。
1 <body> 2 <header>...</header> 3 <div class="body"> 4 <main class="content">...</main> 5 <nav class="nav">...</nav> 6 <aside class="ads">...</aside> 7 </div> 8 <footer>...</footer> 9 </body>
聖杯布局也可以做成以下幾種布局方式：
1.固定寬度布局：為網頁設置一個固定的寬度，通常以px做為長度單位，常見於PC端網頁，不適合多端(移動端)使用。
優點：更好的適應當前市場上所有的設備：我們知道當前市面上主流的集中分辨率為以下幾種
在固定布局中，網頁的寬度是必須指定為一個像素值。
例如鳳凰網，他的寬度為1000px，我電腦的分辨率為：1080*1920，所以周圍會有留白部分。
現在各大網站的頁面寬度一般為1000px，這樣能適應更多的設備。
2。流式布局：為網頁設置一個相對的寬度，通常以百分比做為長度單位。
優點：隨着頁面的變化，頁面會依據比例跟着變化，但是這種會使頁面中的內容變形。
流布局與固定寬度布局基本不同點 就在於對網站尺寸的側量單位不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。換句話說，通過設置百分比，我們不需要考慮設備尺寸或者屏幕寬度大小了，可以為每種情形找到一種可行的方案，應為你的設計尺寸將適應所有的設備尺寸。流布局與媒體查詢和優化樣式技術密切相關。
3.響應式布局（也稱彈性布局）：通過檢測設備信息，決定網頁布局方式，即用戶如果采用不同的設備訪問同一個網頁，有可能會看到不一樣的內容，一般情況下是檢測設備屏幕的寬度來實現。
使用 viewport meta 標簽在手機瀏覽器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
4.柵格化布局（grid布局）：將網頁寬度人為的划分成均等的長度，然后排版布局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來划分成均等的長度。
注：以上幾種布局方式並不是獨立存在的，實際開發過程中往往是相互結合使用的
流式布局和固定布局區別圖鑒：
