容器属性

  • grid-template-columns/grid-template-rows 设置列/行内容的属性
.cover {
  display: grid; /* 1.设置display为grid */
 	grid-template-columns:repeat(2,100px) == 100px 100px
//grid-template-columns: 50px 3fr 1fr 2fr; 3fr是50px的3倍
//grid-template-columns:150px 1fr 1fr minmax(50px, 150px);//minmax()接受2个参数,最小值和最大值长度范围,该列/行的大小会根据剩余空间进行自动分配,大小在长度范围内。
}
  • grid-gap:设置行列间距
grid-row-gap:10px;
grid-column-gap:20px;
等价于
gap:10px 20px
  • Grid-template-areas:网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
grid-template-areas: 
    'a a a a '
    'b b b b ' 
    'd e . g ';
    
1.将单元格写成相同的名字就可以合并区域
2.如果某些区域不需要利用,则使用"点"(.)表示。
    
<div class="cover">
      <div class="top">top</div>
      <div class="left item1"></div>
      <div class="middle"></div>
      <div class="right"></div>
</div>

.cover {
  display: grid; /* 1.设置display为grid */
  width: 100%;
  height: 250px;
  grid-template-areas:
    "top top top"
    "left middle right";
  grid-template-columns: 100px auto 100px;
}
.cover > .top {
  grid-area: top; /*  指定当前元素所在的区域位置, 从grid-template-areas选取值 */
  background-color: red;
}

.cover > .left {
  grid-area: left;
  background-color: #8ca0ff;
}
.cover > .middle {
  grid-area: middle; 
  background-color: green;
}
.cover > .right {
  grid-area: right; 
  background-color: blue;
}
  • grid-auto-flow:容器子元素放置的顺序,默认先行后列
grid-auto-flow:column; 先放置列
  • place-items:决定项目的水平和垂直位置
place-items:center 等价 justify-content:center;align-items:center
  • place-content:决定容器的水平和垂直方向

项目属性

  • grid-column/grid-row 设置项目位置
  • grid-area 设置项目放置区域
  • place-self 设置项目在单元格内的位置

爬。