gird布局《个人觉得非常好用》

最新推荐文章于 2024-09-11 10:06:17 发布

web_小码农

最新推荐文章于 2024-09-11 10:06:17 发布

阅读量156

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/m0_53001289/article/details/142058885

版权

一、相对于flex布局
（1）优点：gird布局（适用于二维布局的场景更加灵活），flex（适用于一维布局的场景更加灵活）
二、代码示例

<!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>Document</title>
    <style>
      /* gird布局（适用于二维布局的场景更加灵活） flex（适用于一维布局的场景更加灵活）  */
      .box {
        /* width: 600px; */
        width: 80%;
        height: 600px;
        box-shadow: 0 0 0.9375rem rgba(0, 0, 0, 0.05);
        border-radius: 5px;
        padding: 30px;
        margin: 0 auto;
        display: grid;

        /* 自适应小于155px 时候自适应 */
        /* grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); */

        /*  repeat(4, 1fr) 重复四次平均分配 */
        /* grid-template-columns: repeat(4, 1fr); */

        /* 中间200px 两边自适应 */
        grid-template-columns: 1fr 200px 1fr;

        /* 上下左右间距10px */
        gap: 10px;
      }
      .box .item {
        background-color: pink;
        border-radius: 5px;
        /* width: 100px; */
        /* height: 100px; */
      }

      /* 某一个盒子占几份（类似于b站布局） */
      /* .box .one {
        grid-row: 1/3;
        grid-column: 1/3;
      } */
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item one"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>