我已经设置了一个网格系统,它们几乎按预期运行。
问题是列之间有很大的缝隙
我尝试设置 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>
最佳答案
正如 Niet the dark Absol 评论的那样。
The whole container is 100% width by default, and so the columns each take a third of the full width available. However, the items within have a fixed width, so you have a large gap. – Niet the Dark Absol 54 mins ago
只需为我的容器设置宽度即可修复它。
.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;
}
关于html - 元素之间的间隙空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57295316/