aspect-ratio宽高比

  <div class="wrapper">
    <div class="item">
         grid-tamplate-columns：设置容器每列的宽度(项目的宽度)
         grid-template-rows：设置容器每行的宽度(项目的高度)
         grid-row-gap：设置每行之间的行间距
         grid-column-gap：设置每列之间的列间距
         grid-gap：上面两个设置的简写
         grid-column-gap：设置每列之间的列间距
         grid-gap：上面两个设置的简写 grid-column-gap：设置每列之间的列间距
         
     </div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
     <div class="item">6</div>
     <div class="item">7</div>
     <div class="item">8</div>
  </div>

 .wrapper {
            width: 80%;
            margin: 0 auto;
            display: grid;
            box-shadow: 0 0 20px #689ce4;
            padding: 20px;
            /* 每一列的宽 */
            /* grid-template-columns:  repeat(3, 150px); */
            /* grid-template-columns: repeat(4,2fr); */
            /* 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。 */
            /* grid-template-columns: 200px 2fr 2fr;*/
            /* 每一行的高 */
            /* grid-template-rows: repeat(auto-fill, 200px); */
            /* grid-template-columns: 200px 2fr 2fr; */
            /* grid-row-gap: 20px;
            grid-column-gap: 20px; */
            /* 自适应 */
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 20px;


        }

        .item {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #689ce4;
            color: #fff;
            aspect-ratio: 1 / 1;
            /* aspect-ratio: 16 / 9; */
            /* //等同于 1/2 */
            /* aspect-ratio: 0.5;  */
        }
        /* 兼容性，如果浏览器不支持  aspect-ratio，使用@supports，也可以是在浏览器中某些样式不支持时书写*/
        @supports not(aspect-ratio: 1 / 1){
            .item{
                height: 500px;
            }
        }
        /* @supports not(display: grid){
            .wrapper{
                display: flex;
            }
        } */