经典圣杯布局

简介: 经典圣杯布局

效果.gif


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


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

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

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


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

目录
相关文章
|
IDE 开发工具 Python
dsw
dsw
400 2
|
11月前
|
存储 数据采集 算法
数据中台最全详解,一文彻底搞懂!
中台是大型数据架构模式,也是大型架构的必备技能,本篇全面详解数据中台,建议收藏备用。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
数据中台最全详解,一文彻底搞懂!
|
缓存 负载均衡 算法
【软件设计师备考 专题 】性能指标(响应时间、吞吐量、周转时间)和性能设计
【软件设计师备考 专题 】性能指标(响应时间、吞吐量、周转时间)和性能设计
908 0
|
关系型数据库 MySQL 数据安全/隐私保护
MySQL管理用户与权限(详细教程)
MySQL管理用户与权限(详细教程)
1523 0
|
JavaScript CDN
vue_按需引入elment、echarts和路由懒加载,减少打包体积
vue_按需引入elment、echarts和路由懒加载,减少打包体积
279 0
|
弹性计算 应用服务中间件
阿里云国外云服务器有哪些地域可选?如何选择?
1.轻量应用服务器的可选地域为:香港与新加坡; 2.其他云服务器ECS的可选地域为:日本(东京)、马来西亚(吉隆坡)、澳大利亚(悉尼)、中国(香港)、新加坡、印度(孟买)、美国(弗吉尼亚)、美国(硅谷)、印度尼西亚(雅加达);
|
8天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!