初涉grid布局-白红宇

上一篇在这，项目基本结构不变

基于分割线放置单个项目 (item)

grid-column-start , grid-column-end 这两个属性是设置的item上的，不是container上。这两个属性可以指定分割线的数值。

分割线数值

.container{    display: grid;    grid-template-columns: 1fr 1fr 1fr;    grid-gap: 20px;}.item1{    grid-column-start: 2;    grid-column-end:3;}复制代码

grid-column-start 和

grid-column-end可以缩写为

grid-column

grid-column: 1 / -1 表示占据100%的grid的宽度（注意grid的宽度不一定等于容器的宽度哦）

span

.container{    display: grid;    grid-template-columns: 1fr 1fr 1fr;    grid-gap: 20px;}.item1{    grid-column-start: 2;    grid-column-end: span 2;}复制代码

span表示跨度，如上所示，item开始的地方在第二条线上跨度了两个单元。

.container{    display: grid;    grid-template-columns: 1fr 1fr 1fr;    grid-gap: 20px;}.item1{    grid-column-start: span 2;}复制代码

根据规范上所说，个人感觉应该是比如第一个item它是1,2, 但是因为它开始的部分是span 2,所以它的初始位到3了，而此时结束位还在2,根据规范要进行交换。

If the placement for a grid item contains two lines, and the start line is further end-ward than the end line, swap the two lines. If the start line is equal to the end line, remove the end line.

自动创建行列填充

当我们不知道容器宽度的时候想动态的创建 grid-template-columns时可以用 auto-fit 和auto-fill这两个属性。 grid-template-columns: repeat(auto-fit, 150px); 不考虑gap的情况下，当容器只有300px的时候就会创建两列，有450px宽的时候就会创建三列。

关于这两个区别可以参考

区域 (area)


        
           
      I'm Sidebar #1
    
     
    
           
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.
      
      Lorem ipsum d
    
     
    
           
      I'm Sidebar #2
    
     
    
           
      I'm the footer
    
     
  
    
  复制代码

grid-template-areas 设置对应格子(cell) 的名称，每个名字可以占用多个格子。 “.” 表示死区，footer只用了两个格子，省略不写的话会报错。其中点开

grid-area 会发现

这里我理解的是各个area所代表的边界。

居中

justify-items and align-items

.container{    display: grid;    grid-template-columns: 100px 100px;    grid-template-rows: 100px 100px;    justify-items: center;    align-items: center;    grid-gap: 20px;}复制代码

如图所示

justify-items 和

align-items 可以将项目在单元格内居中，而且会使得项目的宽度是它本身的宽度，而不会占满单元格。和flex，没有设置

align-items 很像，不设置的时候会自动被填满。

place-items 可以将这两个属性合起来写。

justify-content and align-content

.container{    display: grid;    grid-template-columns: 100px 100px;    grid-template-rows: 100px 100px;    height: 400px;    justify-content: center;    align-content: center;    grid-gap: 20px;}复制代码

如图所示，是将container内部的整体进行居中。

align-self and justify-self

justify-items 和 align-items 都是作用于所有的项目上，这个可以设置单个项目的排列方式。

.container{    display: grid;    grid-template-columns: 100px 100px;    grid-template-rows: 100px 100px;    justify-items: center;    align-items: center;    grid-gap: 20px;}.item1{    justify-self: start;    align-self: start;}复制代码