（十）Grid网格布局 (下)

4：Grid容器成员 (Grid Item) 属性

 grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-column

grid-row

grid-area

justify-self

align-self

- **`grid-column-start/end (根据网格线确定Grid Item位置)`**
    - `number`
    - `name`
    - `span number`
    - `span name`
  ```css
    .main {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .item {
        grid-column-start: 2;
        grid-column-end: span 4;
    }

grid-row-start/end (根据网格线确定Grid Item位置)

number
name
span number
span name

.main {
  display: grid;
  grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.item {
  grid-row-start: span 2;
  grid-row-end: 4;
}

本教程图文或视频等内容版权归侠课岛所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。