css网格区域如何理解

什么是网格区域:

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。

css水平居中元素的宽度探究:水平居中还是比较容易的,先看子元素是固定宽度还是宽度未知。1、固定宽度这种方式是绝对定位居中,除了使用margin,还可以使用transform。(注意浏览器兼容性,只适用于 ie9+,移动开发请忽略)     ...