Grid布局学习1. container grid-row-start: 1代表第一根线.

Grid布局

1. container

grid-row-start: 1代表第一根线.

grid-template-columns: 可以用40px, 也可以用fr, 代表一份

grid-gap:12px 不用负margin了, 直接告诉两个块之间的距离

成为container

.container{
    display:grid | inline-grid;
}

设置行和列

/*常规*/
.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 40px 50px auto ;
}

/*简略写法*/
.container{
    grid-template: 40px 50px auto / 40px 50px auto 50px 40px;
}

/*fr表示份数*/
.container{
    grid-template-rows:1fr 2fr 50px ;
}

grid-templates-areas 神器

先画好区域然后, 量好px

定好html结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="demo">
  <div class="image bigImage"></div>
  <div class="image smallImage"></div>
  <div class="image smallImage"></div>
  <div class="image smallImage"></div>
  <div class="image middleImage"></div>
  <div class="image middleImage"></div>
  <div class="image middleImage"></div>
</div>
</body>
</html>

css画好格子:

.demo{
  display: inline-grid;
  border: 1px solid red;
  grid-template-rows: 240px repeat(4, 120px); 
  grid-template-columns: 250px 250px;
  grid-template-areas: 
    "big mid1"
    "big mid2"
    "sm1 mid2"
    "sm2 mid3"
    "sm3 mid3";
}

然后html进行对应

.demo > .image:first-child{
  grid-area: big;
  border: 1px solid red;
}
.demo > .image:nth-child(2){
  grid-area: sm1;
  border: 1px solid red;
}
.demo > .image:nth-child(3){
  grid-area: sm2;
  border: 1px solid red;
}
.demo > .image:nth-child(4){
  grid-area: sm3;
  border: 1px solid red;
}
.demo > .image:nth-child(5){
  grid-area: mid1;
  border: 1px solid red;
}
.demo > .image:nth-child(6){
  grid-area: mid2;
  border: 1px solid red;
}
.demo > .image:nth-child(7){
  grid-area: mid3;
  border: 1px solid red;
}