html - 项目之间的空白

Question

我已经设置了一个网格系统，它们的行为几乎符合预期。

问题是列之间有很大的间隙

我尝试设置 grid-column-gap 但它似乎没有响应。请注意，我使用的是 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>

标签： htmlcsssass

Answer 1

正如 Niet the dark Absol 所评论的那样。

默认情况下，整个容器的宽度为 100%，因此每列占可用全宽度的三分之一。但是，里面的项目有一个固定的宽度，所以你有很大的差距。– Niet the Dark Absol 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;

}