css网格的垂直间距问题
Posted
技术标签:
【中文标题】css网格的垂直间距问题【英文标题】：problem with vertical spacing with css grid 【发布时间】：2021-01-18 16:28:34 【问题描述】：注意div.text前两个div总是在顶部（第二个div也是粘性div），其他div将由jsinsertAdjacenthtml()从底部动态添加
我在两个 div.text 垂直之间得到了一个额外的空间
有没有可能用css grid 解决的方法？
最终结果
*
box-sizing: border-box;
margin:0;
padding:0;
h1,h2,h3,h4,h5,h6
margin:0;
padding:0;
.grid-container
display: grid;
grid-template-columns: repeat(2,1fr) ;
grid-gap: 1px;
background-color: #f7ca18;
padding: 10px;
color:#000;
height:300px;
.grid-container > div.item
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: auto;
background-color: #f4d03f;
text-align: center;
font-size: 14px;
overflow-y:auto;
overflow-x:hidden;
.grid-container > div.item div.text
align-self: end;
display:grid;
grid-template-columns: 1fr max-content ;
.grid-container > div.item div.text:nth-child(2)
position: -webkit-sticky;
position: sticky;
top: 0;
background:red;
align-self: start;
<div class="grid-container">
<div class="item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="item">
<div class="text">
<span>Web App</span>
</div>
<div class="text">
<h1>Sticky Dive</h1>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
</div>
</div>添加两个或三个div.text 时垂直空间的初始问题
*
box-sizing: border-box;
margin:0;
padding:0;
h1,h2,h3,h4,h5,h6
margin:0;
padding:0;
.grid-container
display: grid;
grid-template-columns: repeat(2,1fr) ;
grid-gap: 1px;
background-color: #f7ca18;
padding: 10px;
color:#000;
height:300px;
.grid-container > div.item
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: auto;
background-color: #f4d03f;
text-align: center;
font-size: 14px;
overflow-y:auto;
overflow-x:hidden;
.grid-container > div.item div.text
align-self: end;
display:grid;
grid-template-columns: 1fr max-content ;
.grid-container > div.item div.text:nth-child(2)
position: -webkit-sticky;
position: sticky;
top: 0;
background:red;
align-self: start;
<div class="grid-container">
<div class="item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="item">
<div class="text">
<span>Web App</span>
</div>
<div class="text">
<h1>Sticky Dive</h1>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
</div>
</div>添加两个 div 后最初的样子
【问题讨论】：
问题不清楚。你想达到什么目标？ @Becky<div class="text"> 第一个和第二个 div 将从顶部垂直放置.. 其他潜水将从底部开始
请..如果有人在阅读我试图实现的问题后不清楚..我提出了我的答案..请检查答案..查看两个结果...
【参考方案1】：
您可以使用grid-template-rows: auto 1fr;，它会解决您的问题。
*
box-sizing: border-box;
margin: 0;
padding: 0;
h1,
h2,
h3,
h4,
h5,
h6
margin: 0;
padding: 0;
.grid-container
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1px;
background-color: #f7ca18;
padding: 10px;
color: #000;
height: 300px;
.grid-container>div.item
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
background-color: #f4d03f;
text-align: center;
font-size: 14px;
overflow-y: auto;
overflow-x: hidden;
.grid-container>div.item div.text
align-self: end;
display: grid;
grid-template-columns: 1fr max-content;
.grid-container>div.item div.text:nth-child(2)
position: -webkit-sticky;
position: sticky;
top: 0;
background: red;
align-self: start;
<div class="grid-container">
<div class="item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="item">
<div class="text">
<span>Web App</span>
</div>
<div class="text">
<h1>Sticky Dive</h1>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>1</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>2</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>3</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>4</i></span>
</div>
</div>
</div>【讨论】：
这就是解决方案。我找到了相同的回复***.com/questions/49701408/…，但你为什么不简单地使用grid-auto-rows: max-content;
@devdgehog 我想你可以使用 minmax(min-content, max-content) 或 min-content 或 max-content 中的任何一个。
@Dipen Shah 我把我的答案请检查...我想你不明白我的问题...前两个 div 总是顶部（第二个 div 也将是粘性 div）和其他 div将由js从底部动态添加..
@noor 我想我现在明白了。看看我对我的回答 grid-template-rows: auto 1fr; 所做的更改会得到你想要的。【参考方案2】：
尝试删除.grid-container>div.item ... 中的align-content: end;。我已经在代码中注释了。
*
box-sizing: border-box;
margin: 0;
padding: 0;
h1,h2,h3,h4,h5,h6
margin: 0;
padding: 0;
.grid-container
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1px;
background-color: #f7ca18;
padding: 10px;
color: #000;
height: 300px;
.grid-container>div.item
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
/*align-content: end;*/ /* removed this */
align-items: end; /* added this */
background-color: #f4d03f;
text-align: center;
font-size: 14px;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.grid-container>div.item div.text:first-child
align-self: start;
.grid-container>div.item div.text:first-child h1
/*align-self: start;*/ /* removed this */
position: -webkit-sticky;
position: sticky;
top: 0;
background: red;
color: white;
.grid-container>div.item div.text:not(:first-child)
display: grid;
grid-template-columns: 1fr max-content;
<div class="grid-container">
<div class="item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div class="item">
<div class="text">
<p>Web App</p>
<h1>Sticky Dive</h1>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="text">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
</div>
</div>【讨论】：
删除空间...我添加align-content: end;..
将其替换为align-items: end; 以底部对齐
还有其他 div 垂直而不是底部的结尾
你已经为你的第一个 2 .item div 设置了 align-self: start;。我刚刚编辑了我的答案。试试看
@no 或者一句忠告，在发布问题之前，您必须花点时间。稍后添加零碎不会对您有所帮助。【参考方案3】：
注意：如果有人可以提供更好的解决方案。答案是可以接受的
我通过包装标签解决了我的问题
<div class="text">
<span>Web App</span>
</div>
<div class="text">
<h1>Sticky Dive</h1>
</div>
<div class="text">
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
</div>
初步结果
*
box-sizing: border-box;
margin:0;
padding:0;
h1,h2,h3,h4,h5,h6
margin:0;
padding:0;
.grid-container
display: grid;
grid-template-columns: repeat(2,1fr) ;
grid-gap: 1px;
background-color: #f7ca18;
padding: 10px;
color:#000;
height:300px;
.grid-container div.item
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: min-content ;
align-items: start;
background-color: #f4d03f;
text-align: center;
font-size: 14px;
overflow-y:auto;
overflow-x:hidden;
.grid-container > div.item:nth-child(2) div.text
margin-top: 2px;
display:grid;
grid-template-columns: 1fr ;
.grid-container > div.item:nth-child(2) > div.text:nth-child(2)
position: -webkit-sticky;
position: sticky;
top: 0;
background:red;
align-self: start;
.grid-container > div.item:nth-child(2) > div.text:nth-child(3)
align-self: end;
.grid-container > div.item:nth-child(2) > div.text:nth-child(3) div.message
display: grid;
grid-template-columns: 1fr max-content;
grid-template-rows: min-content ;
border: 1px dotted royalblue;
margin-top: 2px;
padding: 2px 5px;
<div class="grid-container">
<div class="item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="item">
<div class="text" >
<span>Web App</span>
</div>
<div class="text">
<h1>Sticky Dive</h1>
</div>
<div class="text">
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
</div>
</div>
</div>最终结果
*
box-sizing: border-box;
margin:0;
padding:0;
h1,h2,h3,h4,h5,h6
margin:0;
padding:0;
.grid-container
display: grid;
grid-template-columns: repeat(2,1fr) ;
grid-gap: 1px;
background-color: #f7ca18;
padding: 10px;
color:#000;
height:300px;
.grid-container div.item
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: min-content ;
align-items: start;
background-color: #f4d03f;
text-align: center;
font-size: 14px;
overflow-y:auto;
overflow-x:hidden;
.grid-container > div.item:nth-child(2) div.text
margin-top: 2px;
display:grid;
grid-template-columns: 1fr ;
.grid-container > div.item:nth-child(2) > div.text:nth-child(2)
position: -webkit-sticky;
position: sticky;
top: 0;
background:red;
align-self: start;
.grid-container > div.item:nth-child(2) > div.text:nth-child(3)
align-self: end;
.grid-container > div.item:nth-child(2) > div.text:nth-child(3) div.message
display: grid;
grid-template-columns: 1fr max-content;
grid-template-rows: min-content ;
border: 1px dotted royalblue;
margin-top: 2px;
padding: 2px 5px;
<div class="grid-container">
<div class="item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="item">
<div class="text" >
<span>Web App</span>
</div>
<div class="text">
<h1>Sticky Dive</h1>
</div>
<div class="text">
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div><div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
<div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div><div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div><div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div><div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div><div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div><div class="message">
<h6>Title One</h6>
<span>Hello - <i>X</i></span>
</div>
</div>
</div>
</div>【讨论】：
我相信grid-auto-rows有一个简单的方法来看看我的答案。
我认为您在谈论减少第一（标题一）和第二（Hello-X）列之间的水平空间。在这种情况下，添加“padding-right:250px;padding-left:100px;”在 ".grid-container > div.item div.text " 会帮助你。以上是关于css网格的垂直间距问题的主要内容，如果未能解决你的问题，请参考以下文章
java 自动为RecyclerView项添加相等的间距。可以处理水平，垂直和网格显示模式