CSS网格布局学习(6)

CSS网格布局也具有与 flex 布局一样的"盒模型对齐"。例如属性 align-items、align-self、justify-items、justify-self，可选值：

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• lastbaseline

属性 align-content、justify-content，可选值：

• normal
• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly
• baseline
• first baseline
• lastbaseline

在父元素上设置 align-items 属性，相当于为所有子元素都设置了 align-self属性，justify-items 与 justify-self 的关系也同理。四个属性的默认值均为 stretch(在项目具有固定宽高比的情况下例外，因为会导致拉伸变形，所以这种情况下默认为start )。

  
    
    
  

  
    

      
Item 1
      
Item 2
      
Item 3
      
Item 4
    
  

布局效果：

默认 stretch 对齐

更改对齐方式：

.item2 {
    align-self: flex-start;
    justify-self: center;
}
.item3 {
    align-self: flex-end;
    justify-self: center;
}
.item4 {
    align-self: center;
    justify-self: center;
}

布局效果：

更改子项目的对齐方式

如果网络轨道整体占据的空间小于网格容器，就可以在容器中对齐网格轨道。分别使用 align-content 、justify-content对齐列轴和行轴。
创建一个有多余空间的网格容器：

  
    
    
  

  
    

      
Item 1
      
Item 2
      
Item 3
      
Item 4
    
  

image.png

更改空间分配方式：

.wrapper {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        height: 500px;
        width: 500px;
        grid-gap: 10px;
        grid-template-areas:
          "a a b"
          "a a b"
          "c d d";
        align-content: space-between; 
        justify-content: space-around;
        background-color: wheat;
      }

布局效果：

更改 align-content 与 justify-content 属性 调整空间分配

可以看到 Item1 与 Item 2 在列轴方向上空间增大了，因为二者在列轴方向是跨列的项目，align-content: space-between 改变了列轴的轨道宽度，因此导致跨列的项目会在列轴空间上增大。同理，Item1 与 Item4 在行轴方向上跨行，因为 justify-content: space-around 改变了行轴的轨道宽度，因此跨行的项目在行轴空间也增大。

去掉网格容器的对齐，对子项目设置 margin-left: auto; marigin-right: auto ，可以利用自动外边距使元素在项目中对齐。

.item1 {
    margin-left: auto;
    margin-right: auto;
}

布局效果：

利用自动外边距对齐