如何避免空白和填充图像之间的间隙答案

【问题标题】：How to avoid empty spaces and fill gaps between images如何避免空白和填充图像之间的间隙
【发布时间】：2015-12-18 10:14:40
【问题描述】：

我正在使用 Masonry + Isotope 来订购图像马赛克。

我有 3 种不同的图片尺寸：

width:220px;
height: 168px;

width:220px;
height: 336px;

width:440px;
height: 168px;

我认为使用 440 像素的列宽，它会很好地工作，但有时马赛克会有空白空间。砌体/同位素正在工作，因为我可以重新排序/过滤元素。

您可以查看问题的屏幕截图。

你可以在这里看到一个 jsfiddle： https://jsfiddle.net/Vinyl/fjvcjezj/embedded/result/

并附有此问题的代码 sn-p。

$(document).ready(function() {

  var $grid = $('.grid').imagesLoaded(function() {
    // init Isotope after all images have loaded
    $grid.isotope({
      // options...
      itemSelector: '.grid-item',
      //layoutMode: 'packery',
      //percentPosition: true,
      columnWidth: 440,
      gutter: 10
    });
  });

  $('.menu_projets a').click(function(e) {
    e.preventDefault();
    $('.menu_projets a').removeClass('submenu_active');
    $(this).addClass('submenu_active');
  });

  $('#grid-item').click(function() {
    $grid.isotope({
      filter: '*'
    });
  });

  $('#cat_1').click(function() {
    $grid.isotope({
      filter: '.cat_1'
    });
  });

  $('#cat_2').click(function() {
    $grid.isotope({
      filter: '.cat_2'
    });
  });

  $('#cat_3').click(function() {
    $grid.isotope({
      filter: '.cat_3'
    });
  });

  $('#cat_4').click(function() {
    $grid.isotope({
      filter: '.cat_4'
    });
  });

  $('#cat_5').click(function() {
    $grid.isotope({
      filter: '.cat_5'
    });
  });

});

grid-item {
  float: left;
  /*  width: 50px;
  height: 50px;*/
}
.grid_item_1 {
  width: 220px;
  height: 168px;
}
.grid_item_2 {
  width: 220px;
  height: 336px;
}
.grid_item_3 {
  width: 440px;
  height: 168px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>



<ul class="menu_projets filter-button-group">
  <li id="grid-item"><a href="tous">tous</a>
  </li>
  <li id="cat_1"><a href="#">équipement</a>
  </li>
  <li id="cat_2"><a href="#">habitat</a>
  </li>
  <li id="cat_3"><a href="#">activités</a>
  </li>
  <li id="cat_4"><a href="#">projets urbains</a>
  </li>
  <li id="cat_5"><a href="#">espaces publics</a>
  </li>
</ul>


<div class="container container_top">
  <div class="row">
    <div class="grid">

      <div class="grid-item cat_1 grid_item_3">
        <a href="projets/1-87-ranzay-2030.php" class="bwWrapper">
          <img src="http://placehold.it/440x168/3498db/fff" alt="Ranzay 2030">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_3">
        <a href="projets/5-73-palettes.php" class="bwWrapper">
          <img src="http://placehold.it/440x168/e74c3c/fff" alt="Palettes">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_3">
        <a href="projets/4-61-eco-quartier-des-lauriers.php" class="bwWrapper">
          <img src="http://placehold.it/440x168/f1c40f/fff" alt="Eco-quartier des Lauriers ">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_3">
        <a href="projets/4-66-ilot-ucear.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Ilot UCEAR">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-32-pri-malboire.php" class="bwWrapper">
          <img src="http://placehold.it/220x168/9b59b6/fff" alt="PRI Malboire">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_2">
        <a href="projets/3-63-siege-vannes-agglo.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Siège Vannes Agglo">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-64-we-45.php" class="bwWrapper">
          <img src="http://placehold.it/220x168/9b59b6/fff" alt="WE 45">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-20-le-vallon-des-dervallieres.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Le Vallon des Dervallières">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-31-service-de-restauration.php" class="bwWrapper">
          <img src="http://placehold.it/220x336/9b59b6/fff" alt="Service de restauration ">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-34-base-nautique-de-vioreau.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Base nautique de Vioreau">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-50-base-nautique.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Base nautique">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_3">
        <a href="projets/2-17-le-vallon-des-garettes-vd2.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Le Vallon des Garettes VD2">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-29-groupe-scolaire.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Groupe scolaire ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_2">
        <a href="projets/3-62-delegation-territoriale-du-vignoble.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Délégation territoriale du Vignoble">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_3">
        <a href="projets/4-65-parc-technologique-bas-carbone.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Parc technologique bas carbone ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_2">
        <a href="projets/3-78-immeuble-de-bureaux.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Immeuble de bureaux">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_1">
        <a href="projets/5-70-restructuration-du-port-de-la-gravette.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Restructuration du port de la Gravette">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-77-les-portes-de-la-seiche.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Les portes de la Seiche">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-83-vital-parc-monteux.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Vital Parc Monteux">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-88-les-maquisards.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Les Maquisards">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-85-logements-metairies.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Logements Métairies">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-18-le-vallon-d-herme.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Le Vallon d'Hermé">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-53-les-jardins-de-gaia.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Les Jardins de Gaïa">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_2">
        <a href="projets/5-72-restructuration-des-espaces-portuaires.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Restructuration des espaces portuaires">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_1">
        <a href="projets/1-57-realisation-d-un-centre-touristique.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Réalisation d'un centre touristique ">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-48-amenagement-du-coeur-de-bourg.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Aménagement du coeur de bourg ">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-24-les-nympheas.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Les Nymphéas">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_1">
        <a href="projets/4-51-reconversion-du-site-de-l-usine-gep.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Reconversion du site de l’usine GEP ">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-52-le-clos-de-la-rouliere.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Le Clos de la Roulière ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-82-mediacampus.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Médiacampus">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-33-restaurant-scolaire.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Restaurant scolaire ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_2">
        <a href="projets/3-36-carre-de-coueron.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Carré de Couëron">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_3">
        <a href="projets/1-28-maison-des-associations.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Maison des associations">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-47-restaurant-scolaire.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Restaurant scolaire ">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-13-les-rainettes.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Les Rainettes">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-25-maison-d.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Maison D">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-30-le-medley.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Le Medley">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_2">
        <a href="projets/5-43-reamenagement-de-la-rd-857.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Réaménagement de la RD 857">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_3">
        <a href="projets/5-44-reamenagement-du-front-de-mer.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Réaménagement du front de mer">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_3">
        <a href="projets/5-49-rue-du-gue.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Rue du Gué">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_1">
        <a href="projets/5-41-amenagement-de-la-rue-de-rennes.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Aménagement de la rue de Rennes">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_1">
        <a href="projets/5-45-reamenagement-du-front-de-mer.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Réaménagement du front de mer ">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-23-operation-centre-ville.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Opération Centre ville">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-76-mediatheque-associative.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Médiathèque associative">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_3">
        <a href="projets/2-19-ker-pradenn.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Ker Pradenn">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-54-restructuration-des-espaces-portuaires.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Restructuration des espaces portuaires">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-22-villavenir-atlantique.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Villavenir + Atlantique">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_3">
        <a href="projets/1-68-eglise-st-vincent-de-paul.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Eglise St Vincent de Paul ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_3">
        <a href="projets/3-74-bureaux-mc2.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Bureaux MC2">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_1">
        <a href="projets/4-86-ranzay-2030.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Ranzay 2030">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-80-ilot-anne-de-bretagne.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Ilot Anne de Bretagne">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_1">
        <a href="projets/1-84-restaurant-scolaire.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Restaurant scolaire">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-81-harmonie-habitat-clisson.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Harmonie Habitat Clisson">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-69-ilot-la-carrosserie.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Ilot La Carrosserie ">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-55-le-clos-du-verger.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Le Clos du Verger">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_3">
        <a href="projets/3-75-pri-cap-aliment.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="PRI Cap Aliment">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-79-zac-de-la-fleuriaye-ii.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="ZAC de la Fleuriaye II">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_3">
        <a href="projets/5-46-place-de-l-hotel-de-ville.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Place de l’Hôtel de Ville">
        </a>
      </div>

    </div>


  </div>
  <!-- conteneur_centre -->
</div>

【问题讨论】：

标签： javascript jquery jquery-isotope jquery-masonry masonry

【解决方案1】：

尝试使用 flexbox 布局。效果很好！

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://callmenick.com/post/flexbox-examples

【讨论】：

【解决方案2】：

在问我的问题之前，我在不同的帖子上看到我不得不使用 packery 但它不起作用。

在这篇文章中，我找到了解决方案： Isotope Gallery Error: Uncaught Error No layout mode packery line 8

isotope.pkgd.js 中不包含此布局打包模式，必须单独安装。

我不得不下载并安装isotope packery layout js，然后似乎没有更多的空白空间了。

$(document).ready(function() {

  var $grid = $('.grid').imagesLoaded({
    background: '.item'
  }, function() {
    // init Isotope after all images have loaded
    $('.grid').isotope({
      itemSelector: '.grid-item',
      layoutMode: 'packery',
      packery: {
        //columnWidth: 440
      }
    });
  });

  $('.menu_projets a').click(function(e) {
    e.preventDefault();
    $('.menu_projets a').removeClass('submenu_active');
    $(this).addClass('submenu_active');
  });

  $('#grid-item').click(function() {
    $grid.isotope({
      filter: '*'
    });
  });

  $('#cat_1').click(function() {
    $grid.isotope({
      filter: '.cat_1'
    });
  });

  $('#cat_2').click(function() {
    $grid.isotope({
      filter: '.cat_2'
    });
  });

  $('#cat_3').click(function() {
    $grid.isotope({
      filter: '.cat_3'
    });
  });

  $('#cat_4').click(function() {
    $grid.isotope({
      filter: '.cat_4'
    });
  });

  $('#cat_5').click(function() {
    $grid.isotope({
      filter: '.cat_5'
    });
  });

});

grid-item {
  float: left;
  /*  width: 50px;
  height: 50px;*/
}
.grid_item_1 {
  width: 220px;
  height: 168px;
}
.grid_item_2 {
  width: 220px;
  height: 336px;
}
.grid_item_3 {
  width: 440px;
  height: 168px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="https://raw.githubusercontent.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>



<ul class="menu_projets filter-button-group">
  <li id="grid-item"><a href="tous">tous</a>
  </li>
  <li id="cat_1"><a href="#">équipement</a>
  </li>
  <li id="cat_2"><a href="#">habitat</a>
  </li>
  <li id="cat_3"><a href="#">activités</a>
  </li>
  <li id="cat_4"><a href="#">projets urbains</a>
  </li>
  <li id="cat_5"><a href="#">espaces publics</a>
  </li>
</ul>


<div class="container container_top">
  <div class="row">
    <div class="grid">

      <div class="grid-item cat_1 grid_item_3">
        <a href="projets/1-87-ranzay-2030.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Ranzay 2030">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_3">
        <a href="projets/5-73-palettes.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Palettes">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_3">
        <a href="projets/4-61-eco-quartier-des-lauriers.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Eco-quartier des Lauriers ">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_3">
        <a href="projets/4-66-ilot-ucear.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Ilot UCEAR">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-32-pri-malboire.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="PRI Malboire">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_2">
        <a href="projets/3-63-siege-vannes-agglo.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Siège Vannes Agglo">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-64-we-45.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="WE 45">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-20-le-vallon-des-dervallieres.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Le Vallon des Dervallières">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-31-service-de-restauration.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Service de restauration ">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-34-base-nautique-de-vioreau.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Base nautique de Vioreau">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-50-base-nautique.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Base nautique">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_3">
        <a href="projets/2-17-le-vallon-des-garettes-vd2.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Le Vallon des Garettes VD2">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-29-groupe-scolaire.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Groupe scolaire ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_2">
        <a href="projets/3-62-delegation-territoriale-du-vignoble.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Délégation territoriale du Vignoble">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_3">
        <a href="projets/4-65-parc-technologique-bas-carbone.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Parc technologique bas carbone ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_2">
        <a href="projets/3-78-immeuble-de-bureaux.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Immeuble de bureaux">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_1">
        <a href="projets/5-70-restructuration-du-port-de-la-gravette.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Restructuration du port de la Gravette">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-77-les-portes-de-la-seiche.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Les portes de la Seiche">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-83-vital-parc-monteux.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Vital Parc Monteux">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-88-les-maquisards.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Les Maquisards">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-85-logements-metairies.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Logements Métairies">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-18-le-vallon-d-herme.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Le Vallon d'Hermé">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-53-les-jardins-de-gaia.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Les Jardins de Gaïa">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_2">
        <a href="projets/5-72-restructuration-des-espaces-portuaires.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Restructuration des espaces portuaires">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_1">
        <a href="projets/1-57-realisation-d-un-centre-touristique.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Réalisation d'un centre touristique ">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-48-amenagement-du-coeur-de-bourg.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Aménagement du coeur de bourg ">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-24-les-nympheas.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Les Nymphéas">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_1">
        <a href="projets/4-51-reconversion-du-site-de-l-usine-gep.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Reconversion du site de l’usine GEP ">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-52-le-clos-de-la-rouliere.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Le Clos de la Roulière ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-82-mediacampus.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Médiacampus">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-33-restaurant-scolaire.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Restaurant scolaire ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_2">
        <a href="projets/3-36-carre-de-coueron.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Carré de Couëron">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_3">
        <a href="projets/1-28-maison-des-associations.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Maison des associations">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-47-restaurant-scolaire.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Restaurant scolaire ">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-13-les-rainettes.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Les Rainettes">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-25-maison-d.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Maison D">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_1">
        <a href="projets/3-30-le-medley.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Le Medley">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_2">
        <a href="projets/5-43-reamenagement-de-la-rd-857.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Réaménagement de la RD 857">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_3">
        <a href="projets/5-44-reamenagement-du-front-de-mer.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Réaménagement du front de mer">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_3">
        <a href="projets/5-49-rue-du-gue.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Rue du Gué">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_1">
        <a href="projets/5-41-amenagement-de-la-rue-de-rennes.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Aménagement de la rue de Rennes">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_1">
        <a href="projets/5-45-reamenagement-du-front-de-mer.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Réaménagement du front de mer ">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-23-operation-centre-ville.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Opération Centre ville">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-76-mediatheque-associative.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Médiathèque associative">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_3">
        <a href="projets/2-19-ker-pradenn.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Ker Pradenn">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_2">
        <a href="projets/1-54-restructuration-des-espaces-portuaires.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Restructuration des espaces portuaires">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-22-villavenir-atlantique.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Villavenir + Atlantique">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_3">
        <a href="projets/1-68-eglise-st-vincent-de-paul.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Eglise St Vincent de Paul ">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_3">
        <a href="projets/3-74-bureaux-mc2.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Bureaux MC2">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_1">
        <a href="projets/4-86-ranzay-2030.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Ranzay 2030">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-80-ilot-anne-de-bretagne.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Ilot Anne de Bretagne">
        </a>
      </div>


      <div class="grid-item cat_1 grid_item_1">
        <a href="projets/1-84-restaurant-scolaire.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="Restaurant scolaire">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_2">
        <a href="projets/2-81-harmonie-habitat-clisson.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Harmonie Habitat Clisson">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-69-ilot-la-carrosserie.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Ilot La Carrosserie ">
        </a>
      </div>


      <div class="grid-item cat_4 grid_item_2">
        <a href="projets/4-55-le-clos-du-verger.php" class="bwWrapper">
          <img src="http://placehold.it/220x336" alt="Le Clos du Verger">
        </a>
      </div>


      <div class="grid-item cat_3 grid_item_3">
        <a href="projets/3-75-pri-cap-aliment.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="PRI Cap Aliment">
        </a>
      </div>


      <div class="grid-item cat_2 grid_item_1">
        <a href="projets/2-79-zac-de-la-fleuriaye-ii.php" class="bwWrapper">
          <img src="http://placehold.it/220x168" alt="ZAC de la Fleuriaye II">
        </a>
      </div>


      <div class="grid-item cat_5 grid_item_3">
        <a href="projets/5-46-place-de-l-hotel-de-ville.php" class="bwWrapper">
          <img src="http://placehold.it/440x168" alt="Place de l’Hôtel de Ville">
        </a>
      </div>

    </div>


  </div>
  <!-- conteneur_centre -->
</div>

【讨论】：