grid 布局

阮一峰 grid 布局

1、容器属性

.container {
  // display：指定一个容器采用网格布局
  // grid：将容器设置为块元素
  // inline-grid：将容器容器设置为行元素
  display: grid; /*  grid | inline-grid */
  
  
  // 划分行、列大小：grid-template-columns、grid-template-rows
  grid-template-columns: 100px 100px 100px; // 像素
  grid-template-columns: 33.33% 33.33% 33.33%; // 百分比
  grid-template-columns: repeat(3, 33.33%); // 重复
  grid-template-columns: repeat(2, 100px 20px 80px);
  grid-template-columns: repeat(auto-fill, 100px); // 重复
  grid-template-columns: 1fr 1fr; // 占比
  grid-template-columns: 150px 1fr 2fr;
  grid-template-columns: 1fr 1fr minmax(100px, 1fr); // 不小于`100px`，不大于`1fr`
  grid-template-columns: 100px auto 100px;
  
  
  // 划分行、列间隔：grid-gap、grid-row-gap、grid-column-gap
  grid-gap: 20px 20px;
  grid-column-gap: 20px;
  grid-template-areas: 'a a a'
                       'b b b'
                       'c c c';
  
  
  // 容器的子元素会按照顺序：grid-auto-flow
  grid-auto-flow: column; // 先行后列
  grid-auto-flow: rows; // 先列后行
  grid-auto-flow: row dense; // 先行后列"，并且尽可能紧密填满
  grid-auto-flow: column dense; // 先列后行"，并且尽量填满空格
  
  
  // justify-items：单元格内容的水平位置
  justify-items: start | end | center | stretch;
  
  
  // align-items：单元格内容的垂直位置
  align-items: start | end | center | stretch;
  
  
  // justify-content属性是整个内容区域在容器里面的水平位置（左中右）
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

2、项目属性

// 设置 item-1 的四个边所在的位置
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}


// 设置单独的item
.item {
  // 设置单元格内容的水平位置（左中右）
  justify-self: start | end | center | stretch; 
  
  // 单元格内容的垂直位置（上中下） 
  align-self: start | end | center | stretch;
}