Saiwas

Grid Item用法

主要属性:

1. grid-column-start

   grid-column-end

   grid-row-start

   grid-row-end

2. grid-column

   grid-row

3. grid-area
4. justify-self
5. align-self
6. place-self

grid-column-start | grid-column-end | grid-row-start | grid-row-end

在网格布局中, 设置特定的 行/列 来设置一个 Grid Item的位置 grid-column-start/grid-row-start 设置 Item 的开始位置, grid-column-end/grid-row-end 设置结束位置

grid-column-end / grid-row-end 如果没有设置, default 为 span 1. Item 可以重叠, 我们可以使用 z-index 来控制重叠的顺序.

取值:

• line <number>/<name> – 行/列 的编号或者 行/列 的名称
• span <name> – Item 跨域的 Cell 名字.
• span <number> – Item 将跨越的 Cell 数量.
• auto – 表示自动放置，自动跨度或默认跨度.

例子:

.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 | grid-row

• grid-column 是 grid-column-start + grid-column-end 缩写
• grid-row 是 grid-row-start + grid-row-end 缩写
• 如果没有设置, default: span 1

取值: <start-line> / <end-line> – 设置开始位置, 和跨域 cell 的数量.

例子:

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

grid-area

在 container 可以通过 grid-template-areas 设置布局, item 设置此属性, 可以轻松放置到指定的区域.

取值:

• <name> - 自定义区域的名字
• <row-start>/<column-start>/<row-end>/<column-end> - 行数 / 行名

例子:

.container {
  grid-template-areas:
    ". | . | 300px | header | header"
    ". | . | 300px | header | header"
    ". | . | 300px | header | header";
}

.item-d {
  grid-area: header
}

/* It's the same as above */
.item-d {
  grid-area: 1 / col4-start / last-line / 6
}

justify-self

设置 cell 中的 item 对齐方式.

取值:

• start - cell 内, item 左端对齐
• end - cell 内, item 右端对齐
• center - cell 内, item 居中
• stretch - 填满整个 cell

例子:

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

align-self

设置 cell 中的 item 对齐方式.

取值:

• start - cell 内, item 上端对齐
• end - cell 内, item 下端对齐
• center - cell 内, item 居中
• stretch - 填满整个 cell

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

place-self

同时设置 align-self 和 justify-self 例子:

取值:

• auto – 默认值
• <align-self> / <justify-self> – 如果 justify-self 缺少, 会默认取 align-self 的值.

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}