CSS Layout – grid | 码农工具

xxxxxxxxxx
 
.container{
  display: grid;
  grid-template-rows: 50px 2px auto 2px 20px;
  
  height: 100vh;
  border: solid red;
}
​
.top {
  grid-column: 1; 
  grid-row: 1;
  
  height: 50px;
  border: solid 1px green;
}
​
.center {
  grid-column: 1; 
  grid-row: 3;
  
  height: 100%;
  border: solid 1px green;
  
  display: grid;
  grid-template-columns: 200px 5px auto;
}
​
.left {
  grid-column: 1; 
  grid-row: 1;
  width: 200px;
  height: 100%;
  border: solid 1px blue;
}
​
.right {
  grid-column: 3;
  grid-row: 1;
  height: 100%;
  border: solid 1px blue;
}
​
.bottom {
  grid-column: 1; 
  grid-row: 4;
  
  height: 20px;
  border: solid 1px green;
}
CSS