经典圣杯布局

简介: 经典圣杯布局

效果.gif


对于经典的圣杯布局,有页眉页脚左侧边栏右侧边栏主要内容。类似于以前的布局,但现在有侧边栏


要使用一行代码编写整个网格,请使用 grid-template 属性。这可以同时设置

属性和值对为: grid-template: auto 1fr auto / auto 1fr auto 。第一个和第二个以空格分隔的列表之间的斜线之间的分隔符

.parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}点击复制复制失败已复制


煎饼堆栈布局 一样,页眉和页脚具有自动调整大小的内容,这里的左侧和右侧边栏会根据其子项的固有大小自动调整大小。但是,这次是水平尺寸(宽度)而不是垂直尺寸(高度)。

目录
相关文章
|
2月前
|
容器
探索浮动布局的原理与实践
探索浮动布局的原理与实践
|
5月前
|
前端开发
前端三栏布局(包括圣杯,双飞翼)
前端三栏布局(包括圣杯,双飞翼)
|
5月前
使用flex布局实现,7种经典布局案例
使用flex布局实现,7种经典布局案例
|
10月前
|
安全 容器
由圣杯布局引发的思考
今天在MDN看到块格式化上下文有点不以为然,关键是它写的高深莫测,读不懂... 于是下午想试试圣杯布局的时候,终究还是逃不过它。🤣 这里不介绍圣杯布局的历史,这样的文章网上不知道多少篇,我来写写千篇一律中的亮点吧,哈哈。
48 0
|
前端开发
前端经典圣杯布局和双飞翼布局
圣杯布局和双飞翼布局解决的问题是一样的 就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染
94 0
|
前端开发 容器
从0开始学习FlexBox布局
之前研究过一篇《移动端适配总结》,里面主要通过布局不变,改变布局组件元素的大小去适应移动端。但是这种方式对于PC端或者Pad等大屏幕并不适合,所以从想找找看是否有新的方案能否满足跨端自适应布局方式。
100 0
|
编解码 前端开发 Android开发
移动布局基础(流式布局)
移动布局基础(流式布局)
123 0
|
前端开发
前端学习案例1-圣杯布局1
前端学习案例1-圣杯布局1
73 0
前端学习案例1-圣杯布局1
|
前端开发
前端学习案例4-三栏布局2
前端学习案例4-三栏布局2
67 0
前端学习案例4-三栏布局2