为什么引导程序会影响网格行间隙？有什么方法可以预防吗？

Question

我想在 Bootstrap 中使用 CSS 网格系统。然而，他们似乎相处得并不融洽。 grid-gap 部分工作得很好，这意味着 grid-column-gap 工作得很好，但不是 grid-row-gap。我只能通过删除 Bootstrap 来解决这个问题。有什么办法吗？

<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

Answer 1

figure 标签的 ma​​rgin 破坏了您的 grid-gap: 0.2em。有必要覆盖此规则。将此添加到您的 CSS：

figure {
    margin: 0!important;
}