How to use row span in a css grid

Question

Not sure if what am I am trying to achieve is possible using css grid but the current implementation I have is not working. Below is the layout I am trying to achieve. The box in red spans two rows.

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
  background-color: red;
}

.block {
  background-color: grey;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Longfellow

the red box does not span 2 rows. it spans 2 columns!. Simply apply grid-column: span 2; to the box – Sermonize

Answer 1

As said in the comment, you dont span 2 rows, you span 2 columns. Also you need to apply the class to the 1st element: .wide { grid-column: span 2; }

In your picture you also have a 6 column grid not a 5 column one

.grid {
  display: grid;
  grid-template-columns: repeat(6, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.wide {
  grid-column: span 2;
}


/* for styling purpose only */
.grid > div:nth-child(n+1) {
  background-color: grey;
}

.grid > div:nth-child(1) {
  background-color: brown;
}

<div class="grid">
  <div class="wide"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Sermonize

I'd faced a similar dilemma, but to have two columns instead, then to have some items to span two rows. At first I was using numerical positions to hard-set these, but I've completely overlooked your use of "span". So I've decided to try "grid-row: span 2", and it had worked perfectly! Thank you! – Voight

Answer 2

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 2;
  grid-column: 1 /3;
  background-color: re
}

.block {
  background-color: blue;
}

<div id="wrapper">
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Rickie

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Ornie

Answer 3

Following Html and Css you need for grid span option:

<div class="grid">
   <div class="col-span"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

And the Css you need for that is:

.grid {
      display: grid;
      grid-template-columns: repeat(4, 50px);
      grid-auto-rows: 50px;
      grid-gap: 5px;
  }

  .col-span {
      grid-column: span 2;
  }

  .grid > div {
       background-color: #fcfcfc;
  }

  .grid .col-span {
       background-color: gray;
   }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.col-span {
  grid-column: span 2;
}

.grid > div {
  background-color: #e9e0e0;
}

.grid .col-span {
  background-color: gray;
}

<div class="grid">
  <div class="col-span"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Insulate

Answer 4

The following produces exactly what you want.

<div id="wrapper">
    <div class="block" style="grid-column: 1/3;"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

In the CSS, I deleted .wide and .block. #wrapper was left unchanged.

---

Not sure if what am I am trying to achieve is possible using css grid

Anything is possible using CSS Grid 😁

Barrybarrymore

Solid! Thanks Thomas!!! – Longfellow

@user you are welcome!! If you are looking to learn modern CSS, I absolutely love moderncss.dev, great material there! Such as: 3 CSS Grid Techniques to Make You a Grid Convert – Barrybarrymore