我有一个2列的网格布局,其中第1列在页面的左侧。第2列填充了页面的其余部分。我正在尝试仅在第1列和第2列之间创建间距。容器中有10件物品。项目1本身位于网格的列1中,其余的位于列2中
我尝试使用网格间隙,网格间隙列,边距和填充。 grid-gap在网格中的所有内容之间创建间距。其余的不起作用
item1 {
grid-area: 1 / 1 / 7 / 1;
text-align: left;
margin-left: 30px;
}
.grid-container {
display: grid;
grid-template-columns: 350px auto auto auto auto;
grid-gap: 20px;
width: 80%;
margin-bottom: 150px;
}
<div class="grid-container">
<div class="item1">
<P>Buyers</P>
<P>Sellers</P>
<P>All Properties</P>
<P>New Properties</P>
<P>Active Status</P>
<P>Pending</P>
<P>Contingent</P>
<P>Sold</P>
<P>Feedback</P>
</div>
实际结果是网格自动正确地进行了间距。我想在两列之间添加空间。