grid网格的流动grid-auto-flow属性

最新推荐文章于 2025-01-22 11:22:42 发布

枫叶思念

最新推荐文章于 2025-01-22 11:22:42 发布

阅读量300

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/m0_72495985/article/details/127864048

版权

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .box {
    background: orange;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    font-size: 3em;
    margin-right:15px;
  }

  .box:nth-child(even) {
    background: green;
  }

  .wrapper {
    width: 560px;
    border: 1px solid orange;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(5, 115px);
    /*第一行高115px,第二行高100px*/
    grid-template-rows: repeat(1, 115px);
    /*默认是:row*/
    grid-auto-flow:column;
  }
  </style>
</head>

<body>
  <div class="wrapper">
    <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 class="box h">H</div>
    <div class="box i">I</div>
    <div class="box j">J</div>
  </div>
</body>

</html>

关注博主即可阅读全文