Search code examples
cssgrid

How to make my grid cell same size after spanding it over the next cell?

enter image description here

How do I make my grid cell same size after spanning it over the next cell? This is what I have tried so far

.factory {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  height: 600px;
  gap: 10px;
  margin-top: 100px;
  padding: 10px;
}

.factory>div {
  background-color: gray;
  border: 1px green solid;
}

.image-1 {
  width: 100%;
  height: auto;
}

.div-3 {
  grid-column: 3 / span 5;
}

.div-5 {
  grid-column: 1 / span 2;
}
<div class="factory">
  <div class="div-1">box1</div>
  <div class="div-2">box2</div>
  <div class="div-3">box3</div>
  <div class="div-5">box5</div>
  <div class="div-6">box6</div>
</div>

As you can see box6 is smaller than the rest of the boxes.

Solution

  • Your issue is that on div-3 you try to span 5 columns after it has started at column 3 which will make the browser attempt to add 5 more columns to the grid.

    .div-3 {
  grid-column: 3 / span 5;
}

    You can either remove this section completely because you have already specified in your grid-template-columns: 1fr 1fr 2fr; that the third column should be double the space of the first two.

    Another option would be to span 1

    .div-3 {
  grid-column: 3 / span 1;
}

    You can see this clearly by using the inspection tools. You can see 

    .factory {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  height: 600px;
  gap: 10px;
  margin-top: 100px;
  padding: 10px;
}

.factory>div {
  background-color: gray;
  border: 1px green solid;
}

.image-1 {
  width: 100%;
  height: auto;
}

/*.div-3 {
  grid-column: 3 / span 5;
}*/

.div-5 {
  grid-column: 1 / span 2;
}
    <div class="factory">
  <div class="div-1">box1</div>
  <div class="div-2">box2</div>
  <div class="div-3">box3</div>
  <div class="div-5">box5</div>
  <div class="div-6">box6</div>
</div>