CODEWITHSUNDEEP
htmlcsscss-grid
user992731
user992731

Reputation: 3520

How to use row span in a css grid

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.

enter image description here

#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>

Upvotes: 6

Views: 38052

Answers (4)

Developer Ali Usman
Developer Ali Usman

Reputation: 924

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>

Upvotes: 2

tacoshy
tacoshy

Reputation: 13002

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>

Upvotes: 12

Andreas Bonini
Andreas Bonini

Reputation: 44752

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 😁

Upvotes: 1

Basta
Basta

Reputation: 71

#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>

Upvotes: 2

Related Questions