网格布局按行和列

Question

如何“跨越”第一行中等于两列的列，然后第二行中的每一列，如屏幕截图所示（我在第二行中有两列）

CSS

main section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(100px, auto);
    justify-items: stretch;
}

#product {
    grid-column-start: 1;
    grid-column-end: 2;
}

#detail {
    grid-column-start: 1;
    grid-column-end: 1;
}

#customer {
    grid-column-start: 1;
    grid-column-end: 1;
}

HTML

<section>
    <div id="product"></div>
    <div id="detail"></div>
    <div id="customer"></div>
</section>

---

https://learncssgrid.com/的屏幕截图-区别在于第二行有两列。

Answer 1

只需将span 2添加到第一个元素：

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  justify-items: stretch;
}

#product {
  grid-column: span 2;
}

section>* {
  border: 1px solid;
}

<section>
  <div id="product"></div>
  <div id="detail"></div>
  <div id="customer"></div>
</section>