聖杯布局是一種常見的網頁布局模式，其特點是中間部分（通常稱為「聖杯」）可以自適應螢幕寬度，而兩側部分（通常稱為「耳朵」）保持固定寬度。這種布局模式適用於需要兩側固定寬度，中間自適應寬度的場景，如網站的主導航欄。
實現聖杯布局的方法有多種，包括使用浮動、定位或Flexbox等CSS布局模組。以下是一些常見的實現方式：
使用浮動。將中間部分設定為相對定位，兩側部分設定為浮動，並確保兩側部分的寬度之和等於容器的寬度。
使用定位。將中間部分設定為相對定位，兩側部分設定為絕對定位，並確保兩側部分的寬度之和等於容器的寬度。
使用Flexbox。將中間部分設定為Flex容器，兩側部分設定為Flex項目，並確保兩側部分的寬度之和等於容器的寬度。
使用格線布局（Grid）。將中間部分和兩側部分分別設定為格線容器和格線項目，並定義格線布局。
每種方法都有其優勢和適用場景，選擇哪種方法取決於具體的設計需求和項目要求。