关于css:grid布局实现宽高比

45次阅读

共计 873 个字符，预计需要花费 3 分钟才能阅读完成。

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .grid {
        /* 网格布局 */
        display: grid;
        /* 每列每行之间的间距 */
        gap: 20px;
        /* 网格布局列散布,repeat 相当于 for 循环 */
        /* grid-template-columns: 1fr 1fr 1fr 1fr; */
        grid-template-columns: repeat(4, 1fr);
      }
      .grid-item {position: relative;}
      .grid-item::before {
        content: ' ';
        /* 设为块元素，宽度撑满 */
        display: block;
        background-color: blue;
        /* padding-bottom 和 padding-top 百分比是取的父元素的宽度 */
        padding-bottom: 100%;
        /* 宽度是父元素的宽度，高度是父元素的宽度，而后 grid-item 被撑成了一个正方形 */
      }
      /* 这中央应用相对定位脱离文档流，left:0,right:0,top:0;bottom:0，浏览器主动计算宽高，撑满整个父元素，不应用相对定位，他就排在 before 前面了 */
      .con {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="grid-item">
        <div class="con"></div>
      </div>
      <div class="grid-item">
        <div class="con"></div>
      </div>
      <div class="grid-item">
        <div class="con"></div>
      </div>
      <div class="grid-item">
        <div class="con"></div>
      </div>
      <div class="grid-item">
        <div class="con"></div>
      </div>
    </div>
  </body>
</html>

正文完