项目之间的空白

Question

我已经设置了网格系统，并且它们的行为几乎与预期的一样。

问题是列之间有很大的缺口

我尝试设置网格-列间隙，但似乎无响应。 请注意，即时通讯使用的是scss，尽管我尝试将其更改回css，但结果却相同。

 .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 1rem; grid-gap: 1rem; justify-items: center; .language { width: 360px; height: 150px; border: 1px solid rgb(214, 214, 214); background: white; padding: 1rem; text-align: left; border-radius: 10px; cursor: pointer; color: black; box-shadow: 2px 1px 1px 1px rgb(228, 228, 228); } p { color: red; } } 

 <template> <div class="container"> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> <div class="language"> <h3>LanguageContainer</h3> <p>Description</p> </div> </div> </template> 

Answer 1

正如尼特所说，黑暗的Absol。

默认情况下，整个容器的宽度为100％，因此每个列占用可用总宽度的三分之一。 但是，其中的项目具有固定的宽度，因此间隙很大。 – 54分钟前

只需在我的容器中放一个宽度即可将其固定。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1rem;
grid-gap: 1rem;
width: 70%;
justify-items: center;

.language {
    width: 360px;
    height: 150px;
    border: 1px solid rgb(214, 214, 214);
    background: white;
    padding: 1rem;
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
    color: black;
    box-shadow: 2px 1px 1px 1px rgb(228, 228, 228);
}

p {
    color: red;

}

Answer 2

尝试这个：

grid-template-columns: repeat(3, 0fr);

现在您可以使用以下方法调整差距：

grid-gap: 10px;