第三周（grid layout）

.wrapper {
    width: 100%;
    display: grid;                                                       //使用GRID布局
    grid-template-columns: repeat(8, 1fr);                               //分为8列
    grid-auto-rows: minmax(0px, auto);                                   //列数设置为自动
    overflow: hidden;
    background-image:url('../img/timg (7).jpg')  ;
    background-size: cover;
    grid-gap: 10px;                                                      //这里设置了gap，会看的到间隙
  }

 .j {
    
    grid-column: 5 / 8;                                              //占据第5到第8列
    grid-row: 5 / 8;                                                  //占据第5到第8行
  
    background-image: url('./img/20171110_79241ae8b4e2db8bf3c1a9a8772a09ab_cover_mwpm_05501609.jpg');
    background-size: 100% 100%;
  
  }

　　

 

CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。

像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。