CSS Grid布局:网格区域

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在CSS Grid Layout中除了可以使用风格线实现网格布局之外,还可以使用网格区域来实现布局。在《CSS Grid布局:网格单元格布局》和《CSS Grid布局:合并单元格布局》文中都已经领略了CSS Grid Layout中gird-area实现的单元格和合并单元格的布局,但这仅是网格布局使用较为简单、基础的应用。在这篇文章中,将和大家一起探讨CSS Grid Layout中grid-area其他的功能与使用。

网格区域的概念

网格区域(grid-area)是一个逻辑空间,主要用来放置一个或多个网格单元格(Grid Cell)。他是由四条网格线(Grid line),网格区域每边一条,四边相交组织的网格轨道(Grid Track)。简单点理解,网格区域是有四条网格线交织组成的网格空间,这个空间中可能是一个网格单元格,也可能是多个网格单元格。如下图所示:

网格区域

上图橙色的网格区域是由行网格线line3line4和列网格线line3line4组成,其仅仅是一个网格。紫色的网格区域是由行网格线line5line8和列网格线line5line8组成,其包含了九个网格单元格。

定义网格区域

在CSS Grid Layout中定义网格区域有两种方式,一种是通过网格线来定义,另一种是通过grid-template-areas来定义。接下来看看两种定义网格区域的方法在具体使用过程中有何不同。

网格线定义网格区域

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

一起来看一个常见的两列布局:

网格区域

在这里咱们不探讨这个布局有多少方法可以实现,我们需要观注的是如何使用CSS Grid Layout中的grid-area来完成上图这样的布局。其实你要是阅读过《CSS Grid布局:网格单元格布局》和《CSS Grid布局:合并单元格布局》任何一篇文章,您都可以使用grid完成。

我们还是简单的说说怎么使用

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/grid-area.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部