什么是网格区域：

1、网格区域(grid-area)是一个逻辑空间，主要用来放置一个或多个网格单元格。

是由四条网格线(Grid line)，网格区域每边一条，四边相交组织的网格轨道(Grid Track)。简单点理解，网格区域是有四条网格线交织组成的网格空间，这个空间中可能是一个网格单元格，也可能是多个网格单元格。

定义网格区域

2、定义网格区域有两种方式，一种是通过网格线来定义，另一种是通过grid-template-areas来定义。

网格线定义网格区域

使用网格线定义网格区域的方法非常的简单，首先依赖于 grid-template-columns 和 grid-template-rows 显式定义网格线，甚至是由浏览器隐式创建网格线，然后通过 grid-area 属性通过取网格线，组成网格线交织区域，那么这个区域就是所讲的网格区域。在使用 grid-area 属性调用网格线，其遵循的规则是 grid-area: row-start/ column-start / row-end / column-end。

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

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

猜你喜欢

• HTML如何设定标题水平对齐，用什么方法呢？

  不少朋友都想知道在HTML表格标记中标题水平对齐属性、语法那些是怎样的？带着这个问题，爱站技术频道小编特地整理了相关资料，希望能帮助到朋友们。

• CSS calc方法如何理解，怎样使用的

  什么是calc()?学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。calc()从字面我们可以把他理解为一个函数function。其实cal

• CSS中提升优先级属性的用法是什么，有哪些需要注意的

  本文介绍了CSS中提升优先级属性!important的用法问题总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• css3中的滤镜filter怎样实现更改图片颜色？

  今天我们一起来了解css3中的滤镜filter的使用，滤镜filter还是比较实用的，利用filter滤镜能够实现更改图片颜色的效果，那么具体是怎样实现呢？方法是什么？下面我们一起了解看看。

• 如何清空canvas画布上的内容，有哪些方法

  这篇文章主要介绍了清除canvas画布内容(点擦除+线擦除)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧