三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 图文详解前端CSS中的Grid布局,你真的可以5分钟掌握 -> 正文阅读
 

[Html-Css]图文详解前端CSS中的Grid布局,你真的可以5分钟掌握

图文详解前端CSS中的Grid布局,你真的可以5分钟掌握 前言
网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式。
今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式。

CSS
第一个Grid布局
首先我们看看最基本的Grid布局是什么样的,HTML页面的代码如下所示。

HTML代码
然后设置其CSS属性,这里主要展示容器的CSS属性,给子元素添加的color属性就不在这里展示了。

CSS属性
在页面上看到的效果如下,目前因为没有对子div元素做任何设置,会自动将子div沿垂直方向排列。

页面效果
设置行和列
为了让外层的div(wrapper)为一个网格容器,需要设置其行数和列数,就像一个表格一样。
此时就需要用到grid-template-columns和grid-template-rows两个属性值。
grid-template-columns
用于设置网格容器的列属性,其实就相当于列的宽度。当我们需要几列展示时,就设置几个值,这个属性可以接收具体数值比如100px,也可以接收百分比值,表示占据容器的宽度。
需要注意的是:当给容器设定了宽度时,grid-template-columns设定的百分比值是以容器的宽度值为基础计算的。如果未设置宽度时,会一直向上追溯到设置了宽度的父容器,直到body元素。
比如我们设置了以下的CSS属性。

CSS属性
可以看出三列宽度加起来的百分比值为120%,而且wrapper容器并未设置宽度,会一直向上追溯到body元素,这样三列的总宽度已经超过了body的宽度,因此会出现滚动条。

页面效果
grid-template-rows
用于设置网格容器的行属性,其实就相当于行的高度,其特性与grid-template-columns属性类似。
下面简单修改grid-template-columns和grid-template-rows两个属性的值。

CSS值
得到的效果图如下所示。

效果图
放置子元素
接下来我们看看别的情况,通过CSS属性设置3*3的网格。

CSS属性
在页面上的呈现方式如下所示。

从页面上看我们看不出有什么问题,但是打开控制台后可以发现,这个网格已经占据了3*3的空间。它后面的元素只能排列在所有的网格后面。

页面实际情况
不规则排列
当我们需要得到特殊的排列方式,比如占满整行,占满整列,二三行合并等等。
这就需要用到grid-column和grid-row属性,表示行网线和列网线的序号。通过设置start和end值,来进行网格的合并。

网线序号
我们重新给wrapper容器内部的div添加class类。

HTML代码
然后添加以下的CSS代码,给不同的网格特定的行号和列号。

CSS代码
最终得到的效果图如下所示。

页面效果图
结束语
今天这篇文章介绍了CSS中Grid布局的基础知识,应该可以很快掌握,其他的复杂点的网格布局大家也可以自己去尝试。
web前端/H5/javascript学习群:250777811
欢迎大家关注我的微信号公众号,公众号名称:web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧(长按下面的二维码图片、并选择识别图中的二维码)

  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
移动端web开发技巧(转)
工欲善其事必先利其器——dreamweaver
第 29 章 CSS3 弹性伸缩布局[上]
CSS盒子的浮动
上一篇文章      下一篇文章      查看所有文章
加:2017-12-09 23:29:53  更:2017-12-09 23:29:59 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年5日历
2018-5-25 18:44:59
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库