前端入门css网格项属性
上篇介绍了网格容器、网格轨道的相关属性使用方法,如果您还不熟悉网格,建议先去看看之前的文章前端入门——css Grid网格基础知识 ,前端入门——css 网格轨道详细介绍 学习下网格基本知识。
本篇主要介绍网格项的相关属性:grid-column-start 和 grid-row-start(网格列、行的开始位置)grid-column-end 和 grid-row-end(网格列、行结束位置)grid-column 和 grid-row (网格行、列属性简写)grid-area (网格区域,更简单简写方式)
以上四组属性都和网格线密切相关,它们定义了网格项如何根据网格线来定位网格项的位置。网格行和列的开始和结束
语法如下:.item { grid-column-start: | | span | span | auto; grid-column-end: | | span | span | auto; grid-row-start: | | span | span | auto; grid-row-end: | | span | span | auto; }
属性值说明: | – 一个以数字或名称作为编号的网格线span – 设置网格项跨越的网格数目span – 设置网格项跨越网格直到此名称的网格线为止auto– 表示自动跨越,默认跨度为 1网格
如下示例:.item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3; }
.item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-end: span 2; }
如果没有声明grid-column-end/ grid-row-end ,则默认情况下该项目将跨越 1 个网格。
项目可以相互重叠。您可以使用 z-index 它们来控制它们的堆叠顺序。网格列和行属性简写
上面介绍的grid-column-start / grid-row-start 、grid-column-end/ grid-row-end四个属性还可以使用grid-row-start 和 grid-row-end 进行简写。
语法:.item { grid-column: / | / span ; grid-row: / | / span ; }
属性值: / – 每一个都接受与上面四个属性相同的值,包括跨度(span)。
如下示例:.item-c { grid-column: 3 / span 2; grid-row: third-line / 4; }
如果没有声明结束值,则默认情况下该项目将跨越 1 个网格。 网格区域 —— grid-area
使用此属性可以命名一个网格区域,以便在 grid-template-areas 属性创建的模板中引用此网格区域,或者作为grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短的简写。
语法如下:.item { grid-area: | / / / ; }
属性值: – 命名的网格区域名称。///以数字或名称命名的网格线,和上面介绍的属性用法一样。
如下示例:
为网格区域分配名称的一种方式.item-d { grid-area: header; }
作为简写.item-d { grid-area: 1 / col4-start / last-line / 6; }
参考资料:
https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas
https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid