web学习 -- css grid 网格布局和项目属性

项目属性

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

项目的位置是可以指定的，具体方法是指定项目的四个边框分别定位在哪根网格线

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

指定一号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

注：没有指定位置的项目，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。

指定网格线的名字

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

使用span关键字，表示“跨越”，即左右边框（上下边框）之间跨越多少网格

.item-1 {
  grid-column-start: span 2;
}
.item-1 {
  grid-column-end: span 2;
}

grid-column grid-row

grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式

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

项目item-1占据第一行，从第一根列线到第三根列线

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

grid-area

grid-area属性指定项目放在哪一个区域

将 item-1 放在e区域

.item-1 {
  grid-area: e;
}

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

例如

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

justify-self align-self place-self

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

属性表：

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

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

place-self属性是align-self属性和justify-self属性的合并简写形式

place-self: <align-self> <justify-self>;
place-self: center center;