css grid 自动高度_CSS Grid构建圣杯布局
CSS 网格布局模块,虽然现在仍处于编译者的草案之中但是即将定稿。我们现在可以在一些浏览器中进行测试并可以检测其潜在的bug。
有关于CSS Grid布局模块更多的教程,可以点击这里阅读。
CSS 网格布局是真的很复杂,相较于 Flexbox 更是如此。它具有17个新属性并且在如何使用CSS书写方面介绍了很多新概念。为了尝试如何使用萦绕在我脑海中的这些新规范,我决定创建一个圣杯布局尝试新规范工作原理。
什么是圣杯布局?
圣杯布局是一种包括页眉、页脚和一个包含两个左右边栏的主内容区的网页布局。其布局遵循以下规则:
有固定宽度侧边栏和自适应主内容区域
中间一列应该在标记中最先出现,早于两个侧边栏(但在页眉后)
不管三列中包含的是什么,都应该具有相同的高度
页脚应该总是处于浏览器视窗的底部,即使内容不能填满视区高度
布局应该是响应的,在小视窗中所有的部分应该在一列中显示
大家都知道如果不使用hacks这是很难用CSS来实现的。
CSS Grid解决方案
下面是我用 CSS 网格布局想出的的解决方案。第一,标记--
Title
Content
Menu
Ads
Footer
CSS样式的代码只有 31 行:
.hg__header {
grid-area:header;
}
.hg__footer {
grid-area:footer;
}
.hg__main {
grid-area:main;
}
.hg__left {
grid-area:navigation;
}
.hg__right {
grid-area:ads;
}
.hg {
display:grid;
grid-template-areas:"header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns:150px 1fr 150px;
grid-template-rows:100px
1fr
30px;
min-height:100vh;
}
@media screen and (max-width: 600px){
.hg {
grid-template-areas:"header"
"navigation"
"main"
"ads"
"footer";
grid-template-columns:100%;
grid-template-rows:100px
50px
1fr
50px
30px;
}
}
把它分解
如前所述,CSS 网格布局可能非常复杂。然而,创建此布局我只用 17 个新属性中的4个:
grid-area
grid-template-areas
grid-template-columns
grid-template-rows
使用这些 CSS 网格属性创建圣杯布局可以分解成五个步骤。
定义网格
我们想要做的第一件事是定义网格区域,创建网格时我们可以引用它们的别名。这里用到的是grid-area属性。
.hg__header {
grid-area:header;
}
.hg__footer {
grid-area:footer;
}
.hg__main {
grid-area:main;
}
.hg__left {
grid-area:navigation;
}
.hg__right {
grid-area:ads;
}
然后,使用grid-template-areas属性,我们可以真正直观的指定网格的布局。grid-template-areas属性接受一个以空格分隔的字符串。每个字符串表示一行,利用每个字符串,我们就可以获取以一个空格分隔的网格区域列表值,每一个值均定义网格区域的一列。所以如果我们要跨越两列区域,我们需要定义两次。
在我们圣杯布局中有 3 列 3 行。页眉和页脚行跨越 3 列,其他跨越 1 列。
.hg {
display:grid;
grid-template-areas:"header header header"
"navigation main ads"
"footer footer footer";
}
利用此标记我们可以得到以下结果。
定义列宽
接下来,我们想要定义列的宽度。这里我们利用grid-template-columns属性定义列的宽度。此属性接受一个空格分隔的宽度列表,每一个值均表示网格中的一列。因为在我们的布局中有3列,我们可以指定3个宽度:
grid-template-columns: [column 1 width] [column 2 width] [column 3 width];
对于圣杯布局,我们想要将2个侧栏的宽度设置为150px。
.hg {
grid-template-columns:150px [column 2 width] 150px;
}
对于中间列,我们想要其占据其余的全部空间。这里我们可以使用新单位fr。这个单位表示网格中剩余的全部空间。在我们的例子表示网格减去300px(两个侧边栏的宽度)后的宽度。
.hg {
grid-template-columns:150px 1fr 150px;
}
设置完网格列之后, 布局看起来如下所示-
定义行高
接下来,我们就要定义行的高度了。类似于我们用grid-template-columns属性定义列的宽度,我们使用grid-template-rows属性定义行高。此属性也是接受以空格分隔的一行高度列表。虽然我们可以把它写在同一行中,但是我认为为了使其更加清晰直观将一值写一行。
.hg {
grid-template-rows:100px
1fr
30px;
}
所以布局中的页眉高度为100px,页脚高度为30px,中间一行(主要内容和两个侧边栏)占据.hg元素中其余的可用空间。
定位页脚
在圣杯布局中,即使页面内容十分稀疏,我们也想要页脚总是处于视窗的底部。要实现这一目标,我们可以在.hg元素中设置一个最小的视窗高度。
.hg {
min-height:100vh;
}
因为我们将中间一列的宽度和高度设置为占据.hg元素的剩余空间,所以它就会适应于整个屏幕。
响应式
最后,我们想要布局具有响应性。在较小的设备上所有网格项应该一个接一个的以单列显示。为此,我们需要重新定义之前的-grid-template-areas、grid-template-columns和grid-template-rows3个属性.
首先,我们想要所有的网格项按照特定顺序在一列中显示:
@media screen and (max-width: 600px){
.hg {
grid-template-areas:"header"
"navigation"
"main"
"ads"
"footer";
}
}
接下来,我们想要所有的网格项跨越整个宽度:
@media screen and (max-width: 600px){
.hg {
grid-template-columns:100%;
}
}
最后,我们需要重置每个行的高度。除了main之外的所有行都有一个已定义的高度:
@media screen and (max-width: 600px){
.hg {
grid-template-rows:100px /* Header */
50px /* Navigation */
1fr /* Main Content */
50px /* Ads */
30px; /* Footer */
}
}
就是这样!你可以看看这里的演示以及源码(nb:你可能需要在浏览器中启用网络功能才可以看到)。
浏览器支持
在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶
css grid 自动高度_CSS Grid构建圣杯布局相关推荐
- css利用什么xhtml标记构建网页布局,css是利用什么XHTML标记构建网页布局
css是利用 的XHTML标记构建网页布局:XHTML是相对HTML来说的,比html更严格,指的是网页结构规范等,而css是用来美化各部分结构:html利用div标签实现整体的网页布局,利用css实 ...
- css grid 自动高度_10分钟理解CSS3 Grid布局
基本介绍 上一篇文章我们介绍了css3 flexbox,今天我们再来说说css3的另外一个强大的功能:Grid. Grid做前端的同学应该都很熟悉了,翻译成中文为"栅格",用过bo ...
- css grid 自动高度_前端面试题:关于CSS布局
金三银四求职季 各位同学面试是否顺利呢? 在这关键时刻 小狮送上前端面试题一份 有用就赶紧收藏起来吧!!! 1 Q:三栏布局,高度已知,左右两栏固定,中间自适应的三栏布局有几种实现方式,各自的优缺点是 ...
- html 圣杯布局 高度,三种实现圣杯布局方法
本文介绍三种实现圣杯布局的方法,前两种可归为一类,与第三种方法差别在于加载顺序不同. 圣杯布局实现1: 步骤1:给出 HTML结构: 圣杯布局1 * { margin: 0; padding: 0; ...
- css grid 自动高度_2020年你不应该错过的CSS新特性(二)
茫茫人海中与你相遇 相信未来的你不会很差 作者:阿里巴巴淘系技术 来源:https://juejin.im/post/6886258269137043464 Web排版 先看布局上将会有的一些新特性: ...
- css距离顶部高度_css大法(二)
本文写一些关于css的 小的知识点: 盒模型:box-sizing定义盒模型 content-box: width == 内容区宽度 border-box(IE): width == 内容区宽度 + ...
- html css 表格自动高度,html – 表格单元格(IE)中的Textarea CSS {height:100%}
注意:这只是IE中的一个问题. 如何强制textarea垂直填充table-cell div?我已将高度:100%应用于所有父元素,但textarea仍保持其默认高度. 截图: 示例代码: HTML ...
- html css 表格自动高度,HTML/CSS - 具有固定高度的容器中表格单元格的高度不一致...
我有一个使用HTML/CSS设置的表格,它位于正在变成手风琴的UL的LI元素中.问题是,当LI元素动画到特定高度时,它会改变表格单元格的高度,使最后一个元素隐藏起来.HTML/CSS - 具有固定高度 ...
- 实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现
文章目录 实现圣杯布局和双飞翼布局 float + margin负值+relative/添加盒子 前期准备 圣杯布局 margin负值+relative 双飞翼布局 margin负值+添加盒子 fle ...
- 双飞翼HTML圣杯布局,Web前端:CSS中的圣杯布局与双飞翼布局
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
最新文章
- Android 如何防止用户同时点击多个控件问题
- Python2.7连接MySQL5.7 附demo
- 【RegExp】JavaScript中正则表达式判断匹配规则以及常用方法
- java中string的方法_java中String类中的常用方法
- express路由管理的几种自动化方法分享-js教程-PHP中文网
- directoryinfo 读取 映射磁盘_LoaRunner性能测试系统学习教程:磁盘监控(5)
- speech模块实现语音识别
- 普通的java类型是指,String是一个很普通的类 - Java那些事儿
- Ubuntu 14.10安装SecureCRT 7.3
- mysql ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing t
- SylixOS arm64 异常向量表
- 如何得到当前程序执行的堆栈
- 110道 MySQL面试题及答案 (持续更新)
- java bi报表工具_7款顶级开源BI(商务智能)软件和报表工具
- python b64encode_python base64编码解码、SHA256编码、urlsafe_b64encode编码
- android数字滚动控件,Ticker 滚动数字控件
- 用线性规划解决配方问题
- EXCEL 字符替换为换行符
- 人机交互如何改变人类生活 | 公开课笔记
- 魔方(13)齿轮魔方、五阶齿轮魔方(待续)
热门文章
- 三位数除以两位数竖式计算没有余数_北京版二年级数学下册第一单元有余数的除法练习题【都有电子版】...
- 人生苦短我用python(02)动态加载模块
- Linus 谈软件开发管理经验
- docfx daylybuild
- REST+EJB+JPA 框架在 Eclipse+TomEE 的开发环境搭建
- ON_EVENT 报错
- Python对zip、tgz、rar压缩包的解压与读取
- 【狂神说Redis】1NoSQL概述1-2什么是NoSQL
- java中如何获得屏幕的宽度和高度,android-如何获取屏幕的宽度和高度
- java连接hive类找不着_JDBC 连接 hive2 遇到的java.lang.ClassNotFoundException: org.apache.hive.jdbc.HiveDriver...