五、圣杯布局
圣杯布局是最常用的布局，所以被比喻为圣杯 。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏 。
这里的实现是，不管页面宽度，内容区始终分成三栏 。如果宽度太窄，主栏和右边栏会看不到 。如果想将这三栏改成小屏幕自动堆叠，可以参考并列式布局 。
HTML 代码如下 。
<div class="container">
<header/>
<div/>
<main/>
<div/>
<footer/>
</div>
CSS 代码如下（CodePen 示例[8]） 。
.contariner {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
上面代码要写在容器上面，指定采用 Grid 布局 。核心代码是grid-template属性那一行，它是两个属性grid-template-rows（垂直方向）和grid-template-columns（水平方向）的简写形式 。
grid-template: <grid-template-rows> / <grid-template-columns>
grid-template-rows和grid-template-columns都是auto 1fr auto，就表示页面在垂直方向和水平方向上，都分成三个部分 。第一部分（页眉和左边栏）和第三部分（页脚和右边栏）都是本来的内容高度（或宽度），第二部分（内容区和主栏）占满剩余的高度（或宽度） 。
更多前端知识，搜索【前端小学弟】
【css代码注释的写法 css代码】(今完)
推荐阅读
- 飞机挂出7700代码什么意思-飞机代码最严重是什么
- 帝国神话有哪些代码 帝国神话GM代码分享
- 全面战争传奇大不列颠王座将军特性代码汇总 有哪些特性代码
- 地狱之魂代码有哪些 地狱之魂作弊码分享
- 攘鸡文言文翻译 攘鸡文言文翻译及注释
- 范式字巨卿文言文翻译 范式字巨卿文言文翻译注释
- 许衡不食梨文言文翻译，许衡不食梨注释
- 陈太丘与友期行文言文翻译注释
- 水调歌头翻译及注释，水调歌头原文及注释
- 韩休为相文言文翻译及注释 韩休为相文言文翻译