Arrange content blocks in columns without gaps automatically?

Question

I'm trying fill the empty spaces between DIVs on my page.

For some reason it doesn't fill in all the gaps properly! Basically, i need to move the Divs around automatically so they there is never a gap on in between them. Each list is inside <div class="col_1"></div> and this is the Div that needs to move around to fill in the gaps.

I don't want to use anything like masonry js or any other bloated stuff to achieve this by the way. Any help would be appreciated.

/* NAVIGATION */

#Navigation {
  width: 100%;
  float: right;
  margin: 14px 70px 0 0;
  z-index: 100;
  position: static;
}
/*----------------------------------------
--------- NEW NAVIGATION CLASSES ---------
--------------------------------------- */

#menu {
  list-style: none;
  width: 100%;
  font-size: 14px;
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  text-align: left;
  z-index: 999;
  position: static;
}
p.menu {
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  font-size: 14px;
  color: #0e4fa3;
  padding: 6px 0 11px 0;
  text-align: right;
  margin-left: 20px;
}
#menu li {
  float: left;
  display: block;
  text-align: center;
  position: static;
  padding: 7px 10px 7px 10px;
  margin-right: 5px;
  border: 0;
  z-index: 2;
}
#menu li:hover {
  padding: 7px 10px 7px 10px;
  background: #0e4fa3;
}
#menu li:hover a {
  color: #FFFFFF;
}
#menu li.popular:hover a {
  color: #FFF;
}
#menu li a {
  font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #5a748f;
  display: block;
  outline: 0;
  text-decoration: none;
}
#menu li .drop {
  padding-right: 21px;
  background: url("/uk/wp-content/uploads/2012/07/drop.png") no-repeat right 8px;
  /*-- http://www.printing.com/uk/blog/wp-content/uploads/2012/07/drop.png --*/
}
#menu li:hover .drop {
  background: url("/uk/wp-content/uploads/2012/07/drop-white.png") no-repeat right 8px;
  /*-- http://www.printing.com/uk/blog/wp-content/uploads/2012/07/drop-white.png --*/
}
#pricesMenu {
  margin-top: 7px;
  float: left;
  position: absolute;
  left: 0;
  /* Hides the drop down */
  text-align: left;
  padding: 6px 3px 4px 3px;
  border-bottom: 5px solid #0e4fa3;
  background: #ffffff;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
  /* Rounded Corners */
  -moz-border-radius: 0px 0px 3px 3px;
  -webkit-border-radius: 0px 0px 3px 3px;
  border-radius: 0px 0px 3px 3px;
  z-index: 999;
  width: 100%;
}
ul#col_blue {
  width: 180px;
  display: inline;
  padding: 0;
  float: left;
  position: relative;
  margin: 0;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background: #019ae2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #019ae2), color-stop(100%, #0e4fa3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #019ae2 0%, #0e4fa3 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#019ae2', endColorstr='#0e4fa3', GradientType=0);
  /* IE6-9 */
}
ul#col_blue_wide {
  width: 237px;
  display: inline;
  padding: 0;
  float: left;
  position: relative;
  margin: 0;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background: #019ae2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #019ae2), color-stop(100%, #0e4fa3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #019ae2 0%, #0e4fa3 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#019ae2', endColorstr='#0e4fa3', GradientType=0);
  /* IE6-9 */
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
  display: inline;
  float: left;
  position: relative;
  margin-right: 5px;
  padding: 0 5px;
}
.col_1 {
  width: 185px;
}
.col_2 {
  width: 237px;
}
#menu ul li {
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  line-height: 18px;
  font-size: 12px;
  text-align: left;
  z-index: 999;
}
#menu h2 {
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  font-size: 16px;
  margin: 7px 0 4px 0;
  padding-bottom: 5px;
  font-weight: lighter;
  color: #272727;
}
#menu li ul h3 {
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  font-size: 14px;
  margin: 2px 5px;
  padding: 0;
  color: #FFF;
  border-bottom: 1px solid #FFF;
}
#menu li ul h4 {
  color: #019ae2;
  font-size: 15px;
  border-bottom: 1px solid #ced2d5;
  margin: 0;
  padding: 0;
  font-weight: normal;
}
#menu li:hover div a {
  font-size: 12px;
  color: #0e4fa3;
}
#menu li:hover div a:hover {
  color: #019ae2;
  text-decoration: underline;
}
#menu li ul {
  list-style: none;
  padding: 0;
  margin: 0 10px;
  margin-bottom: 10px;
}
#menu li ul li {
  font-size: 10px;
  line-height: 1.3em;
  position: relative;
  padding: 0;
  margin: 0 10px 0 10px;
  float: none;
  text-align: left;
  width: 180px;
  padding: 3px 0 0 0;
}
#menu li ul li:hover {
  background: none;
  border: none;
  padding: 3px 0 0 0;
  margin: 0 0 0 10px;
}
/* -- FOR CLASSES IN LEFT BLUE LIST --*/

#menu li ul li.popular {
  line-height: 1.5em;
}
#menu li ul li.popular a {
  font-size: 12px;
  position: relative;
  padding: 0;
  margin: 0 5px;
  float: none;
  text-align: left;
  width: 180px;
  color: #fff;
}
#menu li ul li.popular a:hover {
  color: #FFF;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin: 0 5px;
}
#menu li ul li.popularbase a {
  font-size: 12px;
  position: relative;
  padding-bottom: 10px;
  margin: 0 5px;
  float: none;
  text-align: left;
  width: 180px;
  color: #fff;
}
#header div.tel {
  position: relative;
  left: 820px;
  top: 41px;
  height: 50px;
  width: 220px;
  text-align: left;
}
#header p.tel {
  position: absolute;
  font-size: 14px;
  color: #4b4b4b;
  vertical-align: top;
}
ul#thumbList {
  width: 560px;
  display: inline;
  padding: 0;
  float: left;
  position: relative;
  margin: 0;
}
#menu li ul li.imageThumb {
  width: 100px;
  height: 140px;
  float: left;
  diplay: block;
  margin: 0;
  padding: 0 10px 5px 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.8em;
}
#menu li ul li.imageThumb img {
  border: 1px solid #c0c0c0;
  background: #eee;
}
#menu li ul li.imageThumb a {
  width: 100px;
  float: left;
  margin: 0;
  padding: 0;
  color: #0e4fa3;
  text-decoration: none;
}
#menu li ul li.imageThumb a span {
  clear: both;
  diplay: block;
  float: left;
  width: 100px;
  text-align: center;
}
#menu li ul li.imageThumb a:hover {
  width: 100px;
  height: 140px;
  float: left;
  margin: 0;
  padding: 0;
  text-decoration: underline;
}

<div id="header">
  <div id="HeadWrapper">
    <div id="Navigation">
      <ul id="menu">
        <li id="designMenuItem">
          <a href="javascript:void(0);" class="drop"></a>

          <!-- </li><!-- End 2 columns Item -->
          <li id="pricesMenuItem"><a href="#" class="drop">Products &amp; Prices</a>

            <!-- Begin 4 columns Item -->
            <div style="" id="pricesMenu">
              <!-- Begin 4 columns container -->
              <div class="col_1">
                <ul>
                  <h4>B</h4>

                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                </ul>
              </div>
              <div class="col_1">
                <ul>
                  <h4>B</h4>

                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                </ul>
              </div>
              <div class="col_1">
                <ul>
                  <h4>B</h4>

                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                </ul>
              </div>
              <div class="col_1">
                <ul>
                  <h4>B</h4>

                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                </ul>
              </div>
              <div class="col_1">
                <ul>
                  <h4>B</h4>

                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                </ul>
              </div>
              <div class="col_1">
                <ul>
                  <h4>B</h4>

                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                </ul>
              </div>
              <div class="col_1">
                <ul>
                  <h4>B</h4>

                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                </ul>
              </div>
              <div class="col_1">
                <ul>
                  <h4>B</h4>

                  <li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>

                  </li>
                  <li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>

                  </li>
                </ul>
              </div>
              <!--<div class="col_1">
         <ul>
          <h4>E</h4>
          <li><a href="/uk/embroidered-clothing" alt="Embroidered Clothing" title="Embroidered Clothing">Embroidered Clothing</a></li>
          <li><a href="/uk/envelopes-blank" alt="Envelopes - Blank" title="Envelopes - Blank">Envelopes - Blank</a></li>
          <li><a href="/uk/envelopes-printed" alt="Envelopes - Printed" title="Envelopes - Printed">Envelopes - Printed</a></li>
          <li><a href="/uk/exhibition-display-stands" alt="Exhibition & Display Stands" title="Exhibition & Display Stands">Exhibition & Display Stands</a></li>
         </ul>
         <ul>
          <h4>F</h4>
          <li><a href="/uk/flags" alt="Flags" title="Flags">Flags</a></li>
          <li><a href="/uk/flyers" alt="Flyers" title="Flyers">Flyers</a></li>
          <li><a href="/uk/showcards" alt="Thick Flyers" title="Thick Flyers">Thick Flyers</a></li>
          <li><a href="/uk/flyers-folded" alt="Folded Flyers" title="Folded Flyers">Folded Flyers</a></li>
          <li><a href="/uk/folders" alt="Folders" title="Folders">Folders</a></li>
          <li><a href="/uk/frames" alt="Frames for Posters" title="Frames for Posters">Frames for Posters</a></li>
          <li><a href="/uk/frisbees-yoyos-games" alt="Frisbees, Yoyos & Games" title="Frisbees, Yoyos & Games">Frisbees, Yoyos & Games</a></li>
         </ul>
         <ul>
          <h4>G</h4>
          <li><a href="/uk/glass-desktop-gifts" alt="Glass Desktop Gifts" title="Glass Desktop Gifts">Glass Desktop Gifts</a></li>
          <li><a href="/uk/greeting-cards" alt="Greeting Cards" title="Greeting Cards">Greeting Cards</a></li>
         </ul>
         <ul>
          <h4>H</h4>
          <li><a href="/uk/hospitality-solutions" alt="Hospitality Solutions" title="Hospitality Solutions">Hospitality Solutions</a></li>
         </ul>
         <ul>
          <h4>I</h4>
          <li><a href="/uk/inserts-for-folders" alt="Inserts for Folders" title="Inserts for Folders">Inserts for Folders</a></li>
          <li><a href="/uk/invitations" alt="Invitations" title="Invitations">Invitations</a></li>
         </ul>
        </div>
       
        <div class="col_1">
         <ul>
          <h4>K</h4>
          <li><a href="/uk/keyrings-bottleopeners-icescrapers" alt="Keyrings & Bottle Openers" title="Keyrings & Bottle Openers">Keyrings & Bottle Openers</a></li>
         </ul>
         <ul>
          <h4>L</h4>
          <li><a href="/uk/laser-price-lists" alt="Laser Price Lists" title="Laser Price Lists">Laser Price Lists</a></li>
          <li><a href="/uk/leaflets" alt="Leaflets" title="Leaflets">Leaflets</a></li>
          <li><a href="/uk/leaflets-folded" alt="Folded Leaflets" title="Folded Leaflets">Folded Leaflets</a></li>
          <li><a href="/uk/leaflets-perforated" alt="Perforated Leaflets" title="Perforated Leaflets">Perforated Leaflets</a></li>
          <li><a href="/uk/stationery" alt="Letterheads" title="Letterheads">Letterheads</a></li>
         </ul>
         <ul>
          <h4>M</h4>
          <li><a href="/uk/menus-and-tentcards" alt="Menus & Tent Cards" title="Menus & Tent Cards">Menus & Tent Cards</a></li>
          <li><a href="/uk/mousemats-coasters-desktidies" alt="Mouse Mats & Coasters" title="Mouse Mats & Coasters">Mouse Mats & Coasters</a></li>
         </ul>
         <ul>
          <h4>N</h4>
          <li><a href="/uk/nano-cards" alt="Nano Cards" title="Nano Cards">Nano Cards</a></li>
          <li><a href="/uk/notepads" alt="Notepads" title="Notepads">Notepads</a></li>
          <li><a href="/uk/ncrs" alt="NCRs" title="NCRs">NCRs</a></li>
         </ul>
         <ul>
          <h4>P</h4>
          <li><a href="/uk/pens" alt="Pens" title="Pens">Pens</a></li>
          <li><a href="/uk/postcards" alt="Postcards" title="Postcards">Postcards</a></li>
          <li><a href="/uk/posters" alt="Posters - Large Format(1+)" title="Posters - Large Format(1+)">Posters - Large Format (1+)*</a></li>
          <li><a href="/uk/litho-posters" alt="Posters Litho (50+)" title="Posters Litho (50+)">Posters - Litho (50+)*</a></li>
         </ul>  
         
        </div>-->
              <!--<div class="col_1">
         <ul>
          <h4>R</h4>
          <li><a href="/uk/reflective-items" alt="Reflective Items" title="Reflective Items">Reflective Items</a></li>
          <li><a href="/uk/reportcovers-and-documentcorners" alt="Report Covers & Doc Corners" title="Report Covers & Doc Corners">Report Covers & Doc Corners</a></li>
          <li><a href="/uk/rulers-paperclips" alt="Rulers & Paper Clips" title="Rulers & Paper Clips">Rulers & Paper Clips</a></li>
         </ul>
         <ul> 
          <h4>S</h4>
          <li><a href="/uk/scratch-cards" alt="Scratch Cards" title="Scratch Cards">Scratch Cards</a></li>
          <li><a href="/uk/signs-lightboxes" alt="Signs & Lightboxes" title="Signs & Lightboxes">Signs & Lightboxes</a></li>
          <li><a href="/uk/showcards" alt="Showcards" title="Showcards">Showcards</a></li>
          <li><a href="/uk/stationery" alt="Stationery" title="Stationery">Stationery</a></li>
          <li><a href="/uk/stickers" alt="Stickers" title="Stickers">Stickers</a></li>
          <li><a href="/uk/stickynotes-and-memopads" alt="Sticky Notes & Memo Pads" title="Sticky Notes & Memo Pads">Sticky Notes & Memo Pads</a></li>
          <li><a href="/uk/swing-tickets-tags" alt="Swing Tickets & Tags" title="Swing Tickets & Tags">Swing Tickets & Tags</a></li>

         </ul>
         <ul>
          <h4>T</h4>
          <li><a href="/uk/tankards-and-tumblers" alt="Tankards & Tumblers" title="Tankards & Tumblers">Tankards & Tumblers</a></li>
          <li><a href="/uk/trophies-and-awards" alt="Trophies & Awards" title="Trophies & Awards">Trophies & Awards</a></li>
         </ul>
         <ul>
          <h4>V</h4>
          <li><a href="/uk/vouchers" alt="Vouchers" title="Vouchers">Voucher Cards</a></li>
          <li><a href="/uk/voucher-booklets" alt="Voucher Booklets" title="Voucher Booklets">Voucher Booklets</a></li>
          <li><a href="/uk/laser-voucher-sheets" alt="Laser Voucher Sheets" title="Laser Voucher Sheets">Laser Voucher Sheets</a></li>
         </ul>
         <ul>
          <h4>W</h4>
          <li><a href="/uk/personalised-wine-and-champagne" alt="Wine, Champagne & Water" title="Wine, Champagne & Water">Wine, Champagne & Water</a></li>
          <li><a href="/uk/wine-glasses-flutes" alt="Wine Glasses & Flutes" title="Wine Glasses & Flutes">Wine Glasses & Flutes</a></li>
          <li><a href="/uk/wobblers" alt="Wobblers" title="Wobblers">Wobblers</a></li>
         </ul>
        </div>--></div>
            <!-- End 4 columns container -->
          </li>
          <!-- End 4 columns Item -->
      </ul>
    </div>
    <!-- Navigation end -->
  </div>
  <!-- Header end -->

Still unsure what you are asking. Please note that, better than a fiddle, SO has got SO snippets (its the document icon with the `<>` in it), so preferably use that. — somethinghere, Oct 08 '15 at 13:36
try bootstrap card columns? http://v4-alpha.getbootstrap.com/components/card/#columns — Jesse, Oct 08 '15 at 13:36
@Pangloss, i have used masonry before and it doesn't work on hidden elements. so It has to be something other than that. — H.HISTORY, Oct 08 '15 at 13:46
used that one too and it does have some major issues in Chrome. — H.HISTORY, Oct 08 '15 at 13:53
No, I've seen that page and as I stated, I have used isotype but it has major issues in chrome. plus it doesn't work well with hidden elements like a dropdown menu similar to my email shown in the jsfiddle. — H.HISTORY, Oct 08 '15 at 14:05
Check the "Pure CSS" at the end in this article: http://designshack.net/articles/css/masonry/ ... also I think these links will help, used with media query, to control column count's etc. 1: http://jsfiddle.net/huAxS/2/ ... 2: http://jsfiddle.net/bazmegakapa/Ft9d2/ — Asons, Oct 08 '15 at 14:51

score 0 · Answer 1 · answered Oct 08 '15 at 20:03

If you are trying to get rid of the auto spaces it give when creating classes etc. you can try clearing the default css styles for that browser by applying reset.css, inside of reset.css put

 html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

which is also available at http://meyerweb.com/eric/tools/css/reset/ and link it to your html with

<link href="reset.css" rel="stylesheet">

After this you will no longer get automatic gaps and can set them yourself, hope this helps.

Arrange content blocks in columns without gaps automatically?

1 Answers1