轻轻松松学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 ...
随机推荐
- 笔记-Linux 内存优化
1.清理前内存使用情况 free -m2.开始清理 echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: d ...
- Python 中的数字到底是什么？
花下猫语:在 Python 中,不同类型的数字可以直接做算术运算,并不需要作显式的类型转换.但是,它的"隐式类型转换"可能跟其它语言不同,因为 Python 中的数字是一种特殊的对 ...
- let与const认识
es2015之前 在es2015之前JavaScript并没有块级作用域这个说法,只有全局和函数级的变量,let的出现使JavaScript语言有了块级作用域 在外面访问 { var a=5; l ...
- Ajxax技术-1
1.什么是Ajax Ajax: Asynchronous javascript and xml (异步javascript和xml). ==Ajax并不是一种新技术,而是已有技术的集合.JavaScr ...
- C++11的decltype关键字
C++11的decltype关键字 概述 decltype关键字和auto有异曲同工之处 有时我们希望从表达式的类型推断出要定义的变量类型,但是不想用该表达式的值初始化变量(如果要初始化就用auto了 ...
- rabbitmq集成和实战
与 Spring 集成 pom 文件 使用 Maven,这里使用的 4.3.11,所以这里引入的是 rabbit 是 2.0.0,如果兼容性的话请自行去 Spring 的官网上去查 这里补充一下,sp ...
- Spring JPA 查询创建
Spring JPA 查询创建 这是JPA内容的核心部分,可以收藏用作参阅文档. 1. 查询转化和关键字 例:一个JPA查询的转化 public interface UserRepository ex ...
- Apache 和 Nginx 下绑定域名
Apache 方法一 参考:链接 版本:2.3 配置文件位置:/usr/share/doc/httpd/httpd-vhosts.conf 添加域名和站点信息: vim /usr/share/doc/ ...
- CTF-WeChall-第一天
2020.09.09 今天来了一个新平台,WeChall,从简单的开始做,才能找到自信--i春秋的题做自闭了
- grpc服务如何添加sentry监控（添加中间件）
目录 需求 解决 需求 sentry是一款非常好用的工具,可以方便追踪线上的异常,在gin框架里边可以非常方便的使用Use添加中件间,grpc服务在网上搜索了一堆没一个能用的,只能硬着头皮看源码 终于 ...