HTML图片排版优化：每行4张图后添加空白行需求

嘿，作为HTML新手，你现在用的是Bootstrap栅格系统来排布图片，想要每行4张后加空白行或者更规整的网格，其实有两种非常好上手的方法：

方法一：基于现有Bootstrap结构，实现每行4张+行间距空白 #

你的代码里已经用了col-lg-3（大屏下占3份，4个刚好满12列），只要把每4个图片容器放进一个row里，Bootstrap的row自带的间距就会自动形成每行后的空白行，同时还能保证排版规整。

修改后的代码如下：

<!-- start portfolio Section -->
<section id="protfolio_sec">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="title_sec">
          <h1>Our Portfolio</h1>
          <h2>WE’RE BRANDING & DIGITAL STUDIO FROM VIET NAM</h2>
        </div>
      </div>
    </div>
    <div class="all-portfolios">
      <!-- 第一行4张 -->
      <div class="row mb-4"> <!-- mb-4是Bootstrap的 margin-bottom 类，增加行间距 -->
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1_m349B3UpIEe_H6GTS_iIOSau5_ui495" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=16NHSj04XvEOGF0FMvpGOZZzTenSLjbYs" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1T7e1E7Nkr37zVsPMorwZ1epSBzQDNxCi" alt="">
        </div>
      </div>
      <!-- 第二行4张 -->
      <div class="row mb-4">
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1StRD1M5VIgsjppFfLHoo5jm4nFCYaXc8" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1sEOoK3DkPL1Ae3Ssbbl_UUicweSXey-0" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1h2jHdeHdKonUV4b-chwDbFTDFL3kgjbg" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1tHObIoEXvU7Q-VqKco-r0TbDNbi9UK2L" alt="">
        </div>
      </div>
      <!-- 第三行4张 -->
      <div class="row">
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1UGow9lO1acWYK3sg4laTNrZ7ksIuaahk" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1ICItudvz6ekE4MMTio6D-il2jxiIjYzg" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1bnfzSAKZpdBoC1JgCBI5oMKrG39DVA1X" alt="">
        </div>
        <div class="col-sm-6 col-lg-3 col-md-3 col-xs-12">
          <img class="img-responsive center-block" src="https://drive.google.com/thumbnail?id=1GXSPr1z0-L2bHyb4-9XJ1Bt5Mg_jeKDr" alt="">
        </div>
      </div>
    </div>
    <div class="post_btn">
    </div>
  </div>
</section>
<!-- End Portfolio Section -->

说明：

• 把每4个col-*容器包裹进row，Bootstrap会自动处理每行的排版，mb-4类是给每行加底部空白（数字4代表间距大小，你可以换成mb-3、mb-5调整）
• 如果你用的是Bootstrap 4+，建议把img-responsive换成img-fluid，是新版的响应式图片类

方法二：用CSS Grid实现更灵活的网格布局 #

如果你想摆脱Bootstrap栅格的限制，用纯CSS实现规整的网格，代码会更简洁，还能自适应不同屏幕宽度：

第一步：修改HTML结构（简化容器） #

<!-- start portfolio Section -->
<section id="protfolio_sec">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="title_sec">
          <h1>Our Portfolio</h1>
          <h2>WE’RE BRANDING & DIGITAL STUDIO FROM VIET NAM</h2>
        </div>
      </div>
    </div>
    <div class="all-portfolios grid-layout"> <!-- 新增grid-layout类 -->
      <div class="portfolio-item"> <!-- 统一用portfolio-item类 -->
        <img class="img-fluid center-block" src="https://drive.google.com/thumbnail?id=1Tyw2_WSc0vtAOEkGGNMoKUOalqkpTGhU" alt="">
      </div>
      <div class="portfolio-item">
        <img class="img-fluid center-block" src="https://drive.google.com/thumbnail?id=1_m349B3UpIEe_H6GTS_iIOSau5_ui495" alt="">
      </div>
      <div class="portfolio-item">
        <img class="img-fluid center-block" src="https://drive.google.com/thumbnail?id=16NHSj04XvEOGF0FMvpGOZZzTenSLjbYs" alt="">
      </div>
      <div class="portfolio-item">
        <img class="img-fluid center-block" src="https://drive.google.com/thumbnail?id=1T7e1E7Nkr37zVsPMorwZ1epSBzQDNxCi" alt="">
      </div>
      <div class="portfolio-item">
        <img class="img-fluid center-block" src="https://drive.google.com/thumbnail?id=1StRD1M5VIgsjppFfLHoo5jm4nFCYaXc8" alt="">
      </div>
      <!-- 后面的图片继续按这个结构添加即可 -->
    </div>
    <div class="post_btn">
    </div>
  </div>
</section>
<!-- End Portfolio Section -->

第二步：添加CSS样式 #

.grid-layout {
  display: grid;
  /* 每行自动适配屏幕，最小宽度250px，超过自动平分宽度，大屏下刚好4张 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* 设置图片之间的间距，包括左右和上下 */
  gap: 20px;
  /* 给整个网格加底部间距，和下面的按钮分开 */
  margin-bottom: 30px;
}

.portfolio-item img {
  width: 100%; /* 确保图片占满容器 */
  height: auto; /* 保持图片比例不变 */
}

说明：

• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))：自动适配屏幕宽度，每个图片容器最小250px，屏幕足够宽时自动分成4列，小屏会自动调整为3列、2列甚至1列
• gap:20px：直接设置列和行之间的间距，不用手动加margin，排版更规整

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