Search code examples
csscss-gridgrid-layout

Grid layout spanning by rows and columns

How to 'span' a column equivalent to two columns in the first row and then for the second row, one column each as show in the screenshot (I've two columns in the second row)

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 from https://learncssgrid.com/ - the difference here is that I have two columns in the second row.

enter image description here

Solution

  • Simply add span 2 to the first element:

    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>