Why do grid-column-start and grid-column-end make the other rows stop growing when I increase screen size?

user_11979385 0
Viewed 87

I have seen this exact question on the link below, but I think the answer is not satisfactory.

CSS Grid: Auto-fit behaving like Auto-fill when using grid-column-start/end

I have six divs inside a main div element with a class of "main". I want the six divs to be responsive on different screens so I have used the following simplified CSS on the main div.

.Main {
  display: grid;      
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: auto;      
}

with the code above, when I autosize, I find my divs to be responsive very well.

But immediately I target the third div using pseudo selector below, the other five divs stops growing in size when O resize.

Here is how I am targeting the third div:

.Main div:nth-child(3){   
  grid-column-start: 1; 
  grid-column-end: -1;
}

What could be the problem? I still want a responsive design.

#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: yellow     }
#div6 { background: pink     }

.Main {
  display: grid;      
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: auto;      
}

.Main div:nth-child(3){   
  grid-column-start: 1; 
  grid-column-end: -1;
}
<div class="Main">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>
  <div id="div6">Div 6</div>
<div/>

css-grid css html
1 Answers

What you want is not a grid. Use flexbox, instead:

#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: yellow     }
#div6 { background: pink     }

.Main {
  display: flex;
  flex-wrap:wrap;
}
.Main > div {
  flex: 250px;
}
.Main div:nth-child(3){   
  flex: 100%;
}
<div class="Main">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>
  <div id="div6">Div 6</div>
</div>

user_86203330
Related