css3属性 grid 网格布局使用示例 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
  <style>
    body {
      margin: 0;
    }

    .content-box {
      height: 100vh;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      grid-gap: 20px;
    }

    .box:nth-child(1) {
      grid-column: 2 / 5;
    }

    .box:nth-child(2) {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 4;
    }

    .box:nth-child(3) {
      grid-column-start: 4;
      grid-column-end: 6;
      grid-row-start: 2;
      grid-row-end: 6;
    }

    .box:nth-child(4) {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 4;
      grid-row-end: 6;
    }

    .box:nth-child(5) {
      grid-column-start: 3;
      grid-row-start: 4;
      grid-row-end: 6;
    }
  </style>
</head>

<body>
  <div class="content-box">
    <div class="box" style="background: #3d4c7c">1</div>
    <div class="box" style="background: #405855">2</div>
    <div class="box" style="background: #4d3f53">3</div>
    <div class="box" style="background: #6e5665">4</div>
    <div class="box" style="background: #635e4d">5</div>
  </div>
</body>

</html>

 

 

posted @ 2021-07-06 18:24  heroljy  阅读(79)  评论(0)  编辑  收藏  举报