我已经建立了一个网格系统,并且它们的运行情况几乎与预期的一样。
问题在于列之间有很大的缺口
我尝试设置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>
答案 0 :(得分:0)
正如黑暗的Absol尼特(Niet)所说。
默认情况下,整个容器的宽度为100%,因此每个列占用可用总宽度的三分之一。但是,其中的项目具有固定的宽度,因此间隙很大。 – 54分钟前尼特(Niet)住在黑暗的绝对世界中
只需在我的容器中放置一个宽度即可将其固定。
.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;
}
答案 1 :(得分:-1)
尝试一下:
grid-template-columns: repeat(3, 0fr);
现在您可以使用以下方法调整间隔:
grid-gap: 10px;