跨越行和列的网格布局

Question

如何 'span' 相当于第一行中的两列的列，然后是第二行中的每列，如屏幕截图所示（我在第二行中有两列）

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>

跨越行和列的网格布局

Grid layout spanning by rows and columns

css

grid-layout

css-grid