1、grid布局又称为网格布局，可以实现二维布局方式。

2、这是使用CSS控制的，不是使用HTML控制的，同时还可以依赖于媒体查询根据不同的上下文得新定义布局。

网格线(Grid Lines)

网格线组成了网格，他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。

网格轨道(Grid Track)

网格轨道是就是相邻两条网格线之间的空间，就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小，用来控制宽度或高度。

网格单元格(Grid Cell)

网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。

网格区域(Grid Area)

网格区域是由任意四条网格线组成的空间，所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• HTML怎样获取标签值，代码怎样写？

  HTML怎样获取标签值，代码怎样写？下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• 用HTML如何写隔行变色的效果，有多少种方式

  这篇文章主要介绍了HTML n种方式实现隔行变色的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中import与link用法是什么，有何差别

  淘宝网页中使用的是import,而很多网站都是使用link，当然还有一些页面比较简单，流量很大的网站，是直接将CSS写在html代码中的？他们有什么区别？css用import还是link好?从经典论坛和另外一个网站大概了解了一下：1、淘宝网页中大部分是这样写的：2、而很多网站使用的都是link：3、而像google百度163等网站他们都是直接写在 ...

• HTML5中body全屏背景图片怎么实现，哪些事项要注意

  这篇文章主要介绍了HTML5 body设置全屏背景图片的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• HTML5的浏览器气泡样式如何修改，方法是什么

  这篇文章主要介绍了html5默认气泡修改的代码详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下