Is it possible to span a column that is equivalent to two columns in the first row and then have one column each for the second row, as shown in the screenshot? (There are two columns in the second row in this case)
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>
Screenshot taken from - note that there are two columns in the second row in this example.