gird网格布局（九宫格：一个实例看懂）

最新推荐文章于 2024-01-25 22:33:11 发布

BBbila

最新推荐文章于 2024-01-25 22:33:11 发布

阅读量414

点赞数

分类专栏： CSS 文章标签： css gird网格布局

本文链接：https://blog.csdn.net/qq_40610760/article/details/103201766

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实例运用：

<!DOCTYPE html>
<html>
 <head>
  <title>自动跳转页面</title>  
 </head> 
  <style>
    html, body {
      padding: 0;
      margin: 0;
      font-size: 30px;
      color: rgb(241, 245, 35);
    }
    .wrap {
      display: grid;
      width: 600px;
      height: 600px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      border: 1px solid red;
    }
    .a1 {
      grid-row-start: 1;
      grid-row-end: 4;
      grid-column-start: 1;
      grid-column-end: 2;
      background-color: rgb(100, 20, 51);
    }
    .a5 {
      grid-row-start: 2;
      grid-row-end: 3;
      grid-column-start: 2;
      grid-column-end: 4;
      background-color: seagreen;
    }
    .a2, .a3, .a4, .a6 {
      color: steelblue;
    }
  </style>
 <script></script>
 <body>
   <article class="wrap">
     <div class="a1">a1</div>
     <div class="a2">a2</div>
     <div class="a3">a3</div>
     <div class="a4">a4</div>
     <div class="a5">a5</div>
     <div class="a6">a6</div>
   </article>
</body>
</html>