Grid question - remove distance between blocks

Hi guys!

Is there a method to remove the distance between blocks? I used row and col-33 class

Thank you!

Have you tried this

<div class="row no-gap">
    <div class="col">50% (.col)</div>
    <div class="col">50% (.col)</div>
  </div>

yes, but it only works for horizontal indents

Can you share your code snippet here?

<div class="page-content" id="main-contents">
  <div class="block">
   <div class="row">
     <div class="col-33">
       <img data-src="{{@root.detail.link}}uploads/slides/{{source}}" class="lazy lazy-fade-in w-100-img">
     </div>
    </div>
  </div>
</div>

image

Seems to be working well for me.

<div class="page-content" id="main-contents">
<div class="block">
 <div class="row no-gap">
   <div class="col-33" style="background-color: #000000; color: antiquewhite; border: solid 1px
   #ffffff;">
     <img data-src="" class="lazy lazy-fade-in w-100-img">
     1
   </div>
   <div class="col-33" style="background-color: #000000; color: antiquewhite; border: solid 1px
   #ffffff;">
    <img data-src="" class="lazy lazy-fade-in w-100-img">
    2
  </div>
  <div class="col-33" style="background-color: #000000; color: antiquewhite; border: solid 1px
  #ffffff;">
    <img data-src="" class="lazy lazy-fade-in w-100-img">
    3
  </div>...

Yes, but if the height of the blocks is different, then you will see indents, as in the screenshot above

Oh, ok. I don’t know if there is a direct solution for that in F7, but you can find an idea for a css workaround right here

Or you can use custom CSS Grid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout