grid布局实现各个端（pc，ipad，手机端）的适配

左&耳

已于 2024-02-28 15:57:18 修改

阅读量469

点赞数 11

文章标签： javascript 前端 css3

于 2024-01-02 16:06:54 首次发布

本文链接：https://blog.csdn.net/weixin_43925630/article/details/135343326

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: auto auto;
      grid-gap: 10px;
      grid-template-areas:
        "area1 area2 area3 area4"
        "area5 area5 area5 area6";
    }

    .item {
      padding: 20px;
      border: 1px solid #ccc;
    }

    .area1 {
      grid-area: area1;
    }

    .area2 {
      grid-area: area2;
    }

    .area3 {
      grid-area: area3;
    }

    .area4 {
      grid-area: area4;
    }

    .area5 {
      grid-area: area5;
    }

    .area6 {
      grid-area: area6;
    }
  </style>
  <title>Grid Example</title>
</head>
<body>

<div class="grid-container">
  <div class="item area1">Item 1</div>
  <div class="item area2">Item 2</div>
  <div class="item area3">Item 3</div>
  <div class="item area4">Item 4</div>
  <div class="item area5">Item 5 (merged)</div>
  <div class="item area6">Item 6 (merged)</div>
</div>

</body>
</html>

在这里插入图片描述