两列布局

创建两列布局,grid

by Boyanliuu

HTML

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>品字布局</title>

</head>

<body>
<div id="left">左列定宽</div>
 <div id="right">右列自适应</div>
</body>

</html>

CSS

* {
     margin: 0;
     padding: 0;
}
body{
  display:grid;
  grid-template-columns:100px 1fr;
}
#left {
    background-color: #f00;
    height: 500px;
}

#right{
   background-color: #0f0;
   height: 500px;
}