【CSS】grid 布局一行自动填充，每行最大限定px

最新推荐文章于 2024-09-01 13:28:38 发布

努力挣钱的小鑫

最新推荐文章于 2024-09-01 13:28:38 发布

阅读量664

点赞数 2

分类专栏： HTML/CSS 文章标签： css 前端 grid

本文链接：https://blog.csdn.net/iaipython/article/details/138116768

版权

HTML/CSS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用CSSGrid实现一个可自适应的网格布局，每个单元格宽度在250px到1fr之间变化，且有20px的间隔。

摘要由CSDN通过智能技术生成

在这里插入图片描述

    <div class="model-plat-content">
      <div class="mode-card" v-for="i in 30"></div>
    </div>

  .model-plat-content {
    display: grid;
    // 解释： repeat(auto-fit, minmax(250px, 1fr)) 自动填充，每行最大250px，最小1fr
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
    .mode-card {
      width: 250px;
      height: 250px;
      border-radius: 20px;
      background-color: #252525;
    }
  }