[英]Gap whitespace between items
我已經設置了網格系統,並且它們的行為幾乎與預期的一樣。
問題是列之間有很大的缺口
我嘗試設置網格-列間隙,但似乎無響應。 請注意,即時通訊使用的是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>
正如尼特所說,黑暗的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;
}
嘗試這個:
grid-template-columns: repeat(3, 0fr);
現在您可以使用以下方法調整差距:
grid-gap: 10px;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.