菜鸟教程在线编辑器

 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
</style>
</head>

<body>
<div id="container">
  <div>
    宽度为 50 像素
  </div>
  <div>
    宽度随着屏幕宽度变化而变化
  </div>
  <div>
    宽度为 50 像素
  </div>
  <div>
    宽度随着屏幕宽度变化而变化
  </div>
  <div>
    宽度固定为 100 像素
  </div>
</div>
</body>
</html>
              