如何实现可拉伸自适应动态grid布局 复刻目标站点栅格展示效果

核心调整点 #

• 移除HTML中嵌套的Bootstrap栅格类（.row、.col-md-4），避免和自定义Grid布局产生样式冲突，给承载作品集的容器单独指定类名，避免和Bootstrap默认.container样式冲突
• 新增图片自适应规则，保证图片缩放时比例不变
• 用响应式Grid配置实现不同宽度下的列数切换

完整修改后代码 #

CSS代码 #

body {
  margin-top: 75px;
  /* 50px is the height of the navbar - change this if the navbarn height changes */
}

/* 单独给作品集容器设置样式，避免和Bootstrap默认container冲突 */
.portfolio-container {
  display: grid;
  gap: 2px; /* 替代原来的margin/padding实现间隙，更符合Grid规范 */
  /* 自动适配列数：单列最小宽度300px，自动填充列数，自动适配1/2/3列 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.portfolio-item {
  width: 100%;
}

/* 图片自适应规则，保持比例铺满容器 */
.portfolio-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

footer {
  margin: 50px 0;
}

提示：如果需要调整列数切换的宽度阈值，直接修改minmax(300px, 1fr)中的300px为对应数值即可。

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Portfolio</title>

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="css/4-col-portfolio.css">
</head>

<body>

  <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#about">About</a>
          </li>
          <li><a href="#services">Services</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

  <div class="container portfolio-container">
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
      <div class="portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>
    <hr>
  </div>
  <!-- /.portfolio-container -->

  <div class="container">
    <hr>
    <footer>
      <div class="row">
        <div class="col-lg-12">
          <p>Copyright &copy; Company 2021</p>
        </div>
      </div>
    </footer>
  </div>
  <!-- /.container -->

  <!-- JavaScript -->
  <script src="js/jquery-1.10.2.js"></script>
  <script src="js/bootstrap.js"></script>

</body>
</html>

实现效果 #

• 页面宽度≥900px时自动展示3列布局
• 页面宽度在600px-899px区间自动切换为2列布局
• 页面宽度<600px时自动切换为1列布局
• 所有图片随容器宽度自适应缩放，始终保持原始比例，不会变形

内容的提问来源于stack exchange，提问作者Davi Silveira