| |
|
|
| IT知识库 -> Html-Css -> 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握 -> 正文阅读 |
[Html-Css]图文详解前端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 按钮特效(一) |
| CSS制作一个简单网页的下拉导航栏 |
| 覆盖掉body的背景图,只需要在相应的地方使用 |
| 繁星CSS3之旅 |
| jQuery实现的全选、反选和不选功能 |
|
 |
 |
 |
|
360图书馆
软件开发资料
文字转语音
购物精选
软件下载
新闻资讯
小游戏
Chinese Culture
股票
三丰软件
开发
中国文化
网文精选
阅读网
看图
日历
万年历
2018年9日历 2018-9-26 1:53:02 |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT知识库 |
