圣杯布局是一种常见的网页布局模式，其特点是中间部分（通常称为“圣杯”）可以自适应屏幕宽度，而两侧部分（通常称为“耳朵”）保持固定宽度。这种布局模式适用于需要两侧固定宽度，中间自适应宽度的场景，如网站的主导航栏。
实现圣杯布局的方法有多种，包括使用浮动、定位或Flexbox等CSS布局模块。以下是一些常见的实现方式：
1.使用浮动。将中间部分设置为相对定位，两侧部分设置为浮动，并确保两侧部分的宽度之和等于容器的宽度。
2.使用定位。将中间部分设置为相对定位，两侧部分设置为绝对定位，并确保两侧部分的宽度之和等于容器的宽度。
3.使用Flexbox。将中间部分设置为Flex容器，两侧部分设置为Flex项目，并确保两侧部分的宽度之和等于容器的宽度。
4.使用网格布局（Grid）。将中间部分和两侧部分分别设置为网格容器和网格项目，并定义网格布局。
1.使用浮动
以下是使用浮动（float）实现的圣杯布局的一个简单例子：HTML:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”><div class="main"> <div class="content"> <p>这是主体内容部分，宽度自适应。</p> </div> </div> <div class="left"> <p>这是左侧栏，固定宽度。</p> </div> <div class="right"> <p>这是右侧栏，固定宽度。</p> </div></div>
</body>
</html>
CSS (styles.css):.container {
pding: 0 200px; /* 为左右两侧栏留出空间 */ overflow: hidden; /* 防止内容溢出 */}
.main {
float: left; width: 100%; background: #f5f5f5; /* 可选：区分主体内容区域 */}
.content {
margin: 0 220px; /* 减去左右两侧栏的宽度和额外的padding */}
.left, .right {
position: relative; float: left; width: 200px; /* 固定宽度 */ height: 100%; margin-left: -100%; /* 将左侧栏拉到主体内容的左边 */ background: #eee; /* 可选：区分侧栏区域 */}
.right {
margin-left: -200px; /* 将右侧栏拉到主体内容的右边 */}
/* 清除浮动 */
.container::after {content: ""; display: table; clear: both;}
在这个例子中，.container 为两侧栏预留了空间，并通过 padding 实现。.main 占据了 .container 的全部宽度，并通过 margin 在内容区域为两侧栏留出空间。.left 和 .right 使用了负 margin-left 来将它们移动到 .main 的两侧。最后，.container::after 用于清除浮动，确保 .container 可以正确包含浮动元素。请注意，这种方法在某些情况下可能需要对 margin 进行微调，以确保内容正确显示。同时，由于浮动元素的特性，如果 .left 和 .right 的高度超过 .main，它们可能会覆盖 .main 的内容。在实际使用中，可能需要根据具体需求和浏览器兼容性进行调整。
2.使用定位。
使用定位（position）来实现圣杯布局是一个经典的方法。以下是一个基于定位实现的圣杯布局的例子：
HTML代码：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - 定位版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”><div class="left"> <p>这是左侧栏，固定宽度。</p> </div> <div class="main"> <p>这是主体内容部分，宽度自适应。</p> </div> <div class="right"> <p>这是右侧栏，固定宽度。</p> </div></div>
</body>
</html>CSS代码（styles.css）：
body, html {
margin: 0; pding: 0; height: 100%;}
.container {
position: relative; /* 设置为相对定位 */ padding: 0 220px; /* 为左右两侧栏留出空间，注意这里要加上侧栏的padding */ min-height: 100vh; /* 设置最小高度为视口高度，避免布局高度问题 */}
.main {
width: 100%; /* 宽度为100% */ float: left; /* 使用浮动使内容左对齐 */ box-sizing: border-box; /* 包括padding和border在宽度内 */}
.left, .right {
position: absolute; /* 设置为绝对定位 */ top: 0; /* 顶部对齐 */ width: 200px; /* 固定宽度 */ height: 100%; /* 高度与容器相同 */ box-sizing: border-box; /* 包括padding和border在宽度内 */}
.left {
left: 0; /* 定位到容器的左侧 */ padding-right: 20px; /* 右侧留出空间，防止内容紧贴边缘 */}
.right {
right: 0; /* 定位到容器的右侧 */ padding-left: 20px; /* 左侧留出空间，防止内容紧贴边缘 */}
/* 清除浮动 */
.container::after {content: ""; display: table; clear: both;}
在这个例子中，.container 设置了 position: relative;，这样它的子元素可以使用绝对定位相对于它进行定位。.left 和 .right 使用了 position: absolute;，并且分别通过 left: 0; 和 right: 0; 定位到 .container 的左右两侧。.container 的 padding 属性为左右两侧栏留出了空间，确保它们不会覆盖 .main 的内容。同时，.left 和 .right 的 padding 属性则用来防止内容紧贴着容器的边缘。
注意，绝对定位的元素不会参与正常的文档流，所以它们的宽度和高度不会影响到 .container 的大小。因此，你可能需要为 .container 设置一个最小高度（如 min-height: 100vh;），以确保它至少占据整个视口的高度。
最后，.container::after 伪元素用于清除浮动，这是为了确保 .container 的高度能够正确包含 .main 的内容，尽管 .left 和 .right 是绝对定位的。但是在这个具体的布局实现中，清除浮动其实是不必要的，因为 .main 已经通过 float: left; 浮动到左侧，并且 .left 和 .right 是绝对定位的，不会影响到 .main 的布局。
在实际项目中，还需要考虑兼容性问题，比如一些老版本的浏览器可能不支持某些CSS属性。因此，在编写代码时，最好进行充分的测试，以确保布局在所有目标浏览器中都能正确显示。
3.使用Flexbox。
使用Flexbox（弹性盒模型）来实现圣杯布局是一种更加现代和灵活的方法。Flexbox 允许你轻松地创建复杂的布局，而无需使用浮动或定位。以下是使用Flexbox实现圣杯布局的一个例子：
HTML 代码：
html
<!DOCTYPE html>
<html lang=“en”>
<he>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - Flexbox版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”><div class="left"> <p>这是左侧栏，固定宽度。</p> </div> <div class="main"> <p>这是主体内容部分，宽度自适应。</p> </div> <div class="right"> <p>这是右侧栏，固定宽度。</p> </div></div>
</body>
</html>
CSS 代码（styles.css）：css
body, html {margin: 0; padding: 0; height: 100%;}
.container {
display: flex; /* 启用弹性盒模型 */ justify-content: space-between; /* 子项两端对齐 */ align-items: stretch; /* 子项在交叉轴上拉伸至相同高度 */ padding: 0 20px; /* 为左右两侧栏留出空间 */}
.main {
flex: 1; /* 占据剩余空间 */ background: #f5f5f5; /* 可选：区分主体内容区域 */}
.left, .right {
flex: 0 0 200px; /* 固定宽度为200px，不伸缩 */ background: #eee; /* 可选：区分侧栏区域 */}
/* 根据需要调整侧栏的 margin */
.left {margin-right: 20px; /* 右侧留出空间，防止与主内容紧贴 */}
.right {
margin-left: 20px; /* 左侧留出空间，防止与主内容紧贴 */}
在这个例子中，.container 被设置为 display: flex;，这意味着它的直接子元素（.left、.main 和 .right）会成为弹性项目，并且会按照Flexbox的规则进行布局。.main 的 flex 属性被设置为 1，这意味着它会占据所有可用的剩余空间。由于 .left 和 .right 的 flex 属性被设置为 0 0 200px，它们将保持固定的宽度（在这个例子中是 200px），不会伸缩。
justify-content: space-between; 确保 .left、.main 和 .right 均匀分布在 .container 中，.left 贴近左侧，.right 贴近右侧，而 .main 占据中间的空间。
align-items: stretch; 确保所有弹性项目在交叉轴（默认是垂直方向）上伸展以填充 .container 的高度。如果需要，可以调整 align-items 的值以改变这一行为。
.container 的 pding 属性为左右两侧栏留出了空间，防止它们与 .main 的内容重叠。同时，.left 和 .right 的 margin 属性则用来在它们与 .main 之间添加额外的间距。
使用Flexbox实现圣杯布局的好处是代码简洁、易于理解，并且提供了更好的浏览器兼容性（尽管在一些较老的浏览器中可能需要添加浏览器前缀或使用polyfill）。此外，Flexbox 还提供了更多的布局选项和灵活性，可以轻松地应对不同的布局需求。
4.使用网格布局（Grid）。
使用CSS Grid布局实现圣杯布局是一种非常直观和强大的方法。Grid布局允许你创建复杂的二维布局结构，而无需使用浮动、定位或Flexbox。以下是使用Grid布局实现圣杯布局的一个例子：
HTML代码：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - Grid版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”><div class="left"> <p>这是左侧栏，固定宽度。</p> </div> <div class="main"> <p>这是主体内容部分，宽度自适应。</p> </div> <div class="right"> <p>这是右侧栏，固定宽度。</p> </div></div>
</body>
</html>CSS代码（styles.css）：
body, html {
margin: 0; padding: 0; height: 100%;}
.container {
display: grid; /* 启用网格布局 */ grid-template-columns: 200px 1fr 200px; /* 定义列宽度：左侧栏宽度、主内容自适应、右侧栏宽度 */ grid-template-rows: 100%; /* 定义行高度，这里为满高 */ grid-column-gap: 20px; /* 列之间的间隙 */}
.left {
grid-column: 1; /* 放置在第一列 */ background: #eee; /* 可选：区分侧栏区域 */}
.main {
grid-column: 2; /* 放置在第二列 */ background: #f5f5f5; /* 可选：区分主体内容区域 */}
.right {
grid-column: 3; /* 放置在第三列 */ background: #eee; /* 可选：区分侧栏区域 */}
在这个例子中，.container 使用了 display: grid; 来启用网格布局。grid-template-columns 属性定义了网格的列结构，其中 200px 是左侧栏和右侧栏的固定宽度，1fr 是一个弹性单位，表示主内容区域将占据可用的剩余空间。grid-template-rows 定义了网格的行结构，这里简单地设置为 100% 来表示单行并占据整个容器的高度。grid-column-gap 设置了列之间的间隙。.left、.main 和 .right 分别通过 grid-column 属性指定它们应该放置在网格的哪一列。这样，左侧栏被放置在第一列，主内容区域被放置在第二列，右侧栏被放置在第三列。
网格布局的优势在于它可以轻松处理复杂的二维布局，而且代码相对简洁易读。此外，网格布局也提供了很好的浏览器兼容性，尽管在一些较老的浏览器中可能需要使用浏览器前缀或使用polyfill。