网格区域之间的间距

时间:2019-07-23 16:47:31

标签: css css-grid

我有一个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>

实际结果是网格自动正确地进行了间距。我想在两列之间添加空间。

0 个答案:

没有答案