拥抱Grid网格布局基本概念之Grid项目

2020-07-201403次阅读csscss模块Grid网格布局

CSS Grid网格布局是为二维布局服务的(同时沿着横向和纵向),Flexbox弹性布局是为一维布局服务的(只能沿横向或纵向的)。CSS Grid网格布局项目属性有grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row、grid-area、justify-self、align-self、place-self。

注意:float,display: inline-block,display: table-cell,vertical-align和column-*属性对网格项不会起作用。

 

grid-column-start, grid-column-end, grid-row-start和grid-row-end

通过引用特定的网格线来确定网格项在网格中的位置。grid-column-start/ grid-row-start是网格项开始的行,grid-column-end/ grid-row-end是网格项结束的行。

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
  • <unmber>:可以是表示带编号网格线的数字,也可以是表示命名网格线的名称
  • span <number>:该网格项将跨越指定的网格数量。
  • span <name>:表示当前网格项会自动扩展,直到命中指定的网格线名称。
  • 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、grid-row

grid-column和grid-row都是简写,前者是grid-column-start + grid-column-end的缩写,后者是grid-row-start + grid-row-end的缩写。
语法上是使用斜杠分隔,如下:

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

语法中的管道分隔符|表示“或者”的意思。然后<start-line>就是grid-*-start属性值,<end-line>就是grid-*-end属性值。例如:

.item{
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}


如果没有声明结束行值,默认情况下该网格项将跨越1个网格数量。

 

grid-area

grid-area为网格项指定一个名称,以便于网络容器属性grid-template-areas引用该网格项。 其实grid-area也算是grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end属性的简写。

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
  • <name>:区域名称。方便网络容器属性grid-template-areas属性引用。
  • <row-start> / <column-start> / <row-end> / <column-end>:占据网格区域的行列起始位置。
.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

速记:行开始/列开始/行结束/列结束。

 

justify-self

  • justify-self表示单个网格项的水平对齐方式。
  • start:将网格项与单元格的左侧对齐。
  • end:将网格项与单元格的右侧对齐。
  • center:将网格项在单元格中水平居中对齐显示。
  • stretch:填充网格项的整个宽度(这是默认设置)

要为网格中的所有网格项设置对齐方式,也可以通过网格容器属性justify-items上设置此行为。

 

align-self

align-self指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。

  • start:将网格项与单元格的顶部对齐。
  • end:将网格项与单元格的底部对齐。
  • center:将网格项在单元格中垂直居中对齐。
  • stretch:填充单元格的整个高度(这是默认设置)。

要对齐网格中的所有网格项,也可以通过网格容器属性align-items上设置此行为。

place-self

place-self是align-self和justify-self属性的简写。

  • auto:布局模式的“默认”对齐方式。
  • <align-self> / <justify-self>:第一个值align-self,第二个值justify-self。如果省略第二个值,则将第一个值分配给两个属性。

除Edge之外,所有主流浏览器均支持place-self属性。

参考摘录与:

A Complete Guide to Grid

写给自己看的display: grid布局教程

CSS Grid Layout

上一篇: 拥抱Grid网格布局基本概念之Grid容器  下一篇: 使用Proxy实现观察者模式  

拥抱Grid网格布局基本概念之Grid项目相关文章