轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段：
1、古老的table表格布局，现在基本已被淘汰。
2、float浮动布局（或者position定位布局），借助float、position 等属性等进行布局，这种方法很成熟，兼容性非常好，现在使用的比较多，但比较繁琐。
3、flex弹性布局，革命性的突破，解决传统布局的痛点。这种方法兼容性不错（除个别浏览器外），很成熟，使用起来很简单，使用的比较多。
4、grid布局，相比flex布局功能有了非常大的提升，是真正的用于网页布局中新方案。如果说flex布局革命性的突破，那么grid布局就是彻底的革命性突破。这种方法，兼容性基本没有大问题，现在使用的越来越多了，不久的将来必是grid布局的兴起的时候。
实际应用中，我们往往在网页整个布局中应用grid布局，局部网页（主要是一维方向上）应用flex布局，一些细枝末节中用position。（float呢？float将来可能就退出历史舞台了，回到它的老本行-图文环绕）
与flex分为伸缩容器和伸缩项目类似，grid也分为网格容器和网格项目
采用网格布局的区域，称为"网格容器"（container）。容器内部采用网格定位的直接子元素，称为"网格项目"（item）。
我的博客-轻轻松松学CSS：Flex布局 介绍过传统经典布局-圣杯布局或双飞翼布局， 页面分为头部（HEADER）、导航（NAV）、主栏（MAIN)、侧栏(ASIDE)、尾部(FOOTER)等五个部分，其中头部、尾部定高，躯干（包含导航、主栏、侧栏）高度自适应，导航和侧栏定宽，主栏的宽度自适应。
以前的传统代码用到了浮动，代码稍显繁琐，在那篇博客中我采用了flex布局，代码简洁不少。flex布局相比较传统布局有了革命性突破，颠覆了传统认知，其实也可以采用grid布局，这样会有更大的突破，可以说grid布局就是页面整体布局而生的。
为了便于flex布局，还增加了<div class="body">....</div>(里面包含NAV、MAIN、ASIDE），grid布局完全可以不要这层多余的代码，它能使得表现与结构的彻底分离，不需要任何多余的代码作为辅助手段，是比较彻底的页面布局属性。
回忆一下flex布局的DOM结构
<body>
<header>HEADER</header>
<div class="container">
<nav>NAV</nav>
<main>MAIN</main>
<aside>ASIDE</aside>
</div>
<footer>FOOTER</footer>
</body>
现在看看grid布局的DOM结构，注意和上一段代码比较，缺少了container那层div（为突出重点，代码都是分段给出的，本文的最后会给出完整的代码）
<body>
<header>HEADER</header>
<nav>NAV</nav>
<main>MAIN</main>
<aside>ASIDE</aside>
<footer>FOOTER</footer>
</body>
效果图是一样的，如下：
以下的CSS代码跟grid布局无关，它能影响背景色、固定高度值、固定宽度值等，读者了解即可，这不是本文的重点。
1 html{
2 height: 100%;
3 text-align:center;
4 }
5 body{
6 margin:0;
7 height:100%;
8 color:red;
9 }
10 header{
11 height: 120px;
12 background-color: cornflowerblue;
13 }
14
15
16 footer{
17 height: 50px;
18 background-color: #000;
19 line-height:50px;
20 text-align:center;
21 }
22 nav{
23 background-color: lightgreen;
24 }
25 main{
26 background-color:#ccc;
27 }
28 aside{
29 background-color: orange;
30 }
以下的CSS代码跟grid布局有关
body{
display:grid;
grid-template-columns:200px auto 150px;
grid-template-rows:120px auto 50px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header{
grid-area:header;
}
nav{
grid-area:nav;
}
main{
grid-area:main;
}
aside{
grid-area:aside;
}
footer{
grid-area:footer;
}
其中body（display：grid）是父容器，，就是本文所指的“网格容器(Grid container)”，header、nav、main、aside、footer是子元素，就是本文所指的“网格项目（Grid item)"，或者叫”项目“
在Flex布局那篇博客中，提到“Flex布局和多媒体查询结合，使响应式布局更加简便”，现在应该这么说“Grid布局和多媒体结合无缝对接，使响应式布局异常简便”
/*中等屏幕*/
@media (max-width:992px){
body{
grid-template-columns:1fr 1fr;
grid-template-rows:120px 200px auto 50px;
grid-template-areas:"header header"
"nav aside"
"main main"
"footer footer";
}
}
/*小屏幕*/
@media (max-width:768px){
body{
grid-template-columns:auto;
grid-template-rows:120px 100px 100px auto;
grid-template-areas:"header"
"nav"
"aside"
"main"
"footer";
}
中等屏幕效果图如下：
小屏幕效果图如下：
怎么样？grid布局够强大的吧？！够简便的吧？！下面是完整的代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>test</title>
8 <style>
9 html{
10 height: 100%;
11 text-align:center;
12 }
13 body{
14 margin:0;
15 height:100%;
16 color:red;
17
18 display:grid;
19 grid-template-columns:200px auto 150px;
20 grid-template-rows:120px auto 50px;
21 grid-template-areas:
22 "header header header"
23 "nav main aside"
24 "footer footer footer";
25 }
26 header{
27 grid-area:header;
28 background-color:cornflowerblue;
29 }
30 nav{
31 grid-area:nav;
32 background-color:lightgreen;
33 }
34 main{
35 grid-area:main;
36 background-color:#ccc;
37 }
38 aside{
39 grid-area:aside;
40 background-color:orange;
41 }
42 footer{
43 grid-area:footer;
44 background-color:#000;
45 line-height:50px;
46 }
47
48 /*中等屏幕*/
49 @media (max-width:992px){
50 body{
51 grid-template-columns:1fr 1fr;
52 grid-template-rows:120px 200px auto 50px;
53 grid-template-areas:"header header"
54 "nav aside"
55 "main main"
56 "footer footer";
57 }
58 }
59 /*小屏幕*/
60 @media (max-width:768px){
61 body{
62 grid-template-columns:auto;
63 grid-template-rows:120px 100px 100px auto;
64 grid-template-areas:"header"
65 "nav"
66 "aside"
67 "main"
68 "footer";
69 }
70 </style>
71 </head>
72 <body>
73 <header>HEADER</header>
74 <nav>NAV</nav>
75 <main>MAIN</main>
76 <aside>ASIDE</aside>
77 <footer>FOOTER</footer>
78 </body>
79 </html>
轻轻松松学CSS:Grid布局的更多相关文章
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- 带你入门 CSS Grid 布局
前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
- 用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
- 轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- 快速使用CSS Grid布局，实现响应式设计
常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...
- CSS Grid 布局
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- CSS Grid布局指南
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
随机推荐
- 【平台开发】— 4.mysql建库建表
本想着把前端脚手架run起来了,然后就可以借着登录来捋一下前后端交互的过程.但是后端导入JPA的时候就发现了,还没有数据库. 既然是本着学习的目的,那咱也不想只在后端写死返回的数据,要做就做全套. 一 ...
- chrome设置跨域访问
1.新建目录 /usr/local/opt/myChromData 2.输入命令行 open -n /Applications/Google\ Chrome.app/ --args --disable ...
- Mybatis相关设置
MyBatis的设置 学习笔记: Mybatis上设置信息可以配置,也可不进型配置,在对Mybatis的setting配置后,会影响到它的运行时行为.以下是相关设置信息的关键字,及所包含的意义: ag ...
- 字符串split的用法
拆分字符串:张三:20|李四:40|王五:40 这个可以使用两次分割,第一次使用 | 分割,放到arr数组里,然后使用循环对arr[i]进行使用:分割 public static void main( ...
- 还不懂Redis？看完这个故事就明白了！
我是Redis 你好,我是Redis,一个叫Antirez的男人把我带到了这个世界上. 说起我的诞生,跟关系数据库MySQL还挺有渊源的. 在我还没来到这个世界上的时候,MySQL过的很辛苦,互联网发 ...
- python 手把手教你基于搜索引擎实现文章查重
前言 文章抄袭在互联网中普遍存在,很多博主都收受其烦.近几年随着互联网的发展,抄袭等不道德行为在互联网上愈演愈烈,甚至复制.黏贴后发布标原创屡见不鲜,部分抄袭后的文章甚至标记了一些联系方式从而使读者获 ...
- C#类库推荐 拼多多.Net SDK，开源免费！
背景介绍 近两年拼多多的发展非常迅速,即便口碑一般,也没有网页端,奈何我们已经全面小康,6亿月收入1000以下,9亿月收入2000以下,所以因为价格原因使用拼多多的用户也越来越多了.同样的,拼多多也开 ...
- Linux驱动之GPIO子系统和pinctrl子系统
前期知识 1.如何编写一个简单的Linux驱动(一)--驱动的基本框架 2.如何编写一个简单的Linux驱动(二)--设备操作集file_operations 3.如何编写一个简单的Lin ...
- [剑指Offer]17-打印从1到最大的n位数(递归)
题目 如题,输入n,则从1打印至99. 题解 考虑到n比较大会有大数问题,所以使用字符数组存储数. 由题可用递归求n位全排列,即为所得. 具体地,用临时字符数组用来存答案,每次递归填好一位,都填好后输 ...
- Kubernetes中的存储(六)
一.ConfigMap 1,介绍 ConfigMap 功能在 Kuberbetes 1.2 版本中引入,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息.ConfigMap API 给我们 ...