grid布局实现宽高比

站长
2022年09月08日 15:06 · 阅读数 274
<!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>