项目之间的空白
项目之间的空白
提问于 2019-07-31 16:28:38
我已经建立了一个网格系统，他们的行为几乎和预期的一样。
问题是柱子之间有一个很大的洞。
我试着设置栅格栏间距，但似乎没有反应。请注意，我使用了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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-31 17:29:40
正如黑暗的阿布索尔尼特所评论的。
默认情况下，整个容器的宽度为100%，因此每个列的宽度都是可用宽度的三分之一。但是，内部的项目有一个固定的宽度，所以您有一个很大的差距。- 54分钟前黑Absol的尼特
只需在我的容器上放一个宽度就能修好它。
.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;
}Stack Overflow用户
发布于 2019-07-31 16:38:43
试试这个：
grid-template-columns: repeat(3, 0fr);现在，您可以通过以下方法调整差距：
grid-gap: 10px;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57295316
复制相关文章
相似问题
腾讯云开发者
