广州web培训
达内广州五羊中心

18589266248

热门课程

达内-广州HTML5培训:关于grid布局的简单介绍!

  • 时间:2017-04-30 16:13
  • 发布: 老姚
  • 来源:前端网

下面广州HTML5培训导师跟大家聊聊grid!哪什么是grid呢?导师个人觉得还是“栅格布局”比较好,因为栅格比网格要好理解的多。想必大家一听栅格,就知道强调的是,单元格之间是有间隙的。而本次广州HTML5培训导师要说的是grid布局一个最简单的入门,没有太多属性。

比如我想定义2列2行一个grid。

<div class="grid">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

</div>

首先容器需要

display:grid;

广州HTML5培训

这个没啥可说的。

下来要定义模板

grid-template-columns:150px 20px 150px;

grid-template-rows:150px 20px 150px;

不是2列2行吗?

这里广州Web前端培训机构导师想让大家知道为什么列模板里共3个值呢?其中150指的是单元格的宽度,而20是指的间隙的宽度。

同理,行模板也是一样的,分别指的是高度。

然后要指定元素到底是单元格还是其中的间隙。

因为间隙的存在,想要的2列2行,实际上变成了3列3行。

比如最后那个单元格,应该是这个3列3行中最后的那个元素。

需要对此指定它的位置是(3,3)而不是(2,2),具体如下设置该元素:

flex-column:3;

flex-row:3;

更多Web前端设计、HTML5开发等资讯,请关注广州Web前端培训机构:http://gz.web.tedu.cn/

上一篇:达内-广州Web前端培训机构:如何借性能优化来促进用户数?
下一篇:达内-广州Web前端培训机构: Web前端设计知识小笔记!

马上预约三天免费体验课

姓名:

电话:

达内分享软件测试的职业发展方向

一分钟学会CSS题目如何解答?

前端开发编程宅男女神日记

2017互联网移动新业态

选择城市和中心
江西省

贵州省

广西省

海南省