我的网格列插入多行而不是单行

Question

我正在尝试使用类名创建网格系统。为此，我将一行分为两列。一旦我这样做，将2列转换为2行。如何预防？

我正在尝试创建一种图书馆方法。因此人们可以根据需要使用混合列。

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-gap:10px;
}

.column-6{
  border:1px solid red;
  grid-column:1/6;
}

<div class="grid">
  <div class="column-6">colunm 50%</div>
  <div class="column-6">column 50%</div>
</div>

这里我将默认值设置为12fr，它分为2列。但显示为2行。是否需要添加任何对齐或包装属性？

提前感谢。

更新

我尝试添加此属性：

.column-6{
  border:1px solid red;
  grid-column:1/6;
  grid-row:1/1;
}

但是两者都在合并。

Answer 1

.grid{
  display:grid;
  grid-template-columns:repeat(minmax(12, 1fr));
  grid-gap:10px;
}

.column-6 {
  border:1px solid red;
  grid-row: 1;
}

<div class="grid">
      <div class="column-6">colunm 50%</div>
      <div class="column-6">column 50%</div>
    </div>

Answer 2

您需要使用span 6。通过设置1/6，您可以明确地设置开始和结束行，而您只需要指定列数即可：

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-gap:10px;
}

.column-6{
  border:1px solid red;
  grid-column:span 6;
}

<div class="grid">
  <div class="column-6">colunm 50%</div>
  <div class="column-6">column 50%</div>
  <div class="column-6">colunm 50%</div>
  <div class="column-6">column 50%</div>
</div>