CSS 网格

 

CSS 网络系统使用行和列来对HTML元素进行控制。

 

1. 创建网格

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
  border: 2px blue solid;
  width: 400px;
  height: 500px;
  display: grid;    /* 显示必须是grid 或者inline-grid */
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}
</style>
</head>
  
<body>
  <div class="grid">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box g">G</div>
  </div>
</body>

</html>

 

 

 

posted @ 2021-01-14 13:36  elewei  阅读(91)  评论(0)    收藏  举报