还在用Flex布局？OUT了快来看看grid布局吧！

news2024/11/28 9:29:27

还在用Flex布局？OUT了快来看看grid布局吧！

之前我在写布局的时候就喜欢用flex，有一次我需要实现四个方块占一行的需求，But 一共有七个方块到了第二行很Egg疼，第二行它直接三个方块居中排布，这三兄弟直接在第二行玩了居中排布，最后我还是用flex布局解决这个问题只不过我需要计算宽度以及边距目的为了让他们一行四个然后取消 justify-content: space-between;
最终解决了这个问题

现在我们有了Grid布局就很Great！！！
来看代码

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        width: 100%;
        height: 100%;
        padding: 30px;
        box-sizing: border-box;
        display: grid;
        place-items: center;
        /*
        CSS 中的 place-items
        是一个简写属性 ，
        它允许你在相关的布局（如 Grid 或 Flexbox）
        中可以同时沿着块级和内联方向对齐元素 (例如：align-items 和 justify-items 属性) 。
        如果未提供第二个值，则第一个值作为第二个值的默认值。
        */
      }
      .Wrapper {
        width: 1440px;
        height: 100%;
        border-radius: 12px;
        padding: 30px;
        box-sizing: border-box;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        border: 1px solid black;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
      .box {
        border-radius: 10px;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 200px;
        font-weight: 600;
      }
      .box1 {
        grid-row: 1/3;
        grid-column: 1/3;
        border-radius: 10px;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 200px;
        font-weight: 600;
        display: flex;
        font-size: 40px;
        justify-content: center;
        align-items: center;
        animation: TransitionKeyColors 3s linear infinite;
      }
      @keyframes TransitionKeyColors {
        0% {
          color: #000000;
        }
        25% {
          color: #000000;
        }
        50% {
          color: #ffd700;
        }
        100% {
          color: #ffd700;
        }
      }
    </style>
  </head>
  <body>
    <div class="Wrapper">
      <div class="box1">GOPRO</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
      <div class="box">GRID</div>
    </div>
  </body>
</html>