html - why does bootstrap affect grid-row-gap? Is there any way to prevent?

Question

I wanted to use CSS grid system with Bootstrap. However, it seems they don't get on well with each other. grid-gap works partially well, which means grid-column-gap works just fine, but not grid-row-gap. I can solve this problem only by removing Bootstrap. Is there any way?

<style>
.gallery--images {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 grid-template-rows: repeat(8, 5vw);
 grid-gap: 0.2em;                                        
 margin-bottom: 10px;
 background: rgba(250, 250, 250, 0.575);
 background-clip: padding-box;
 backdrop-filter: blur(10px );
 border: 2px solid rgb(240, 240, 240);
 border-radius: 5px;
}
</style>


<div class="gallery--images">
    <figure class="gallery__item gallery__item--1">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 1" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--2">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 2" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--3">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 3" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--4">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 4" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--5">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 5" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--6">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 6" class="gallery__img">
    </figure>
</div>

https://codepen.io/Isya/pen/RwGXwjJ

question from:https://stackoverflow.com/questions/65896017/why-does-bootstrap-affect-grid-row-gap-is-there-any-way-to-prevent

Answer 1

This margin of figure tag breaks your grid-gap: 0.2em. It is necessary to override this rule. Add this to your css:

figure {
    margin: 0!important;
}