Question

如果我在下面有这个，那么所有数据都将重叠because我告诉它要转到同一列和行。如何从我想要的列和行开始，它“成长”？

如果删除该行，则会按预期向下移动页面。但是如果我想在第1/3行，5月12日等开始呢？你能这样做吗？

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: 1 / 3;
}

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

Answer 1

我不认为有这种行为的纯CSS网格解决方案，但仍然有一个干净简单的CSS解决方案。

使用伪元素。

在网格布局中（如在flex布局中），容器上的伪元素被视为项目。因此，插入一个跨越空行的伪。

在下面的示例中，您的内容项从第6行开始。无需更改列规则。

＆＃13;

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  /* grid-row: 1 / 3; */
}

.mygrid::before {
  content: "";
  grid-row: 1 / span 5;
  grid-column: col-start 4 / span 7;
}

＆＃13;

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

＆＃13;

Answer 2

您只能在第一个内容

上设置此样式

＆＃13;

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
  grid-auto-rows: 20px;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: span 2;
}

.content:first-child {
  grid-row: 1 / 3;
}

＆＃13;

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

＆＃13;

为一系列网格项选择起始列和行

2 个答案: