CODEWITHSUNDEEP
htmlcsscss-grid
DarkRunner
DarkRunner

Reputation: 449

CSS Grid auto-fit and min-max leaves whitespace

I'm using CSS Grid to set up the following structure: enter image description hereHowever, when I resize my viewport, the structure becomes deformed: Deformed Structure

I've tried using grid-template-columns: repeat(auto-fit, minmax(200px,1fr)) to fix the issue, hoping that auto-fit would take up the remaining whitespace on the right of "What Happened?", and left of "The SHSAT Blues". I'm suspecting the minimum width of 200px may be the cause, because for the browser to fit one more div to the right of "What Happened?", the track may require a width less than 200px. Thus, I changed 200px to auto, but that failed to resolve the issue.

.container{
    display:grid;
    width:100%;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    grid-gap:30px;
}

.item{
    background-color:#FFC300;
}

.item-1{
    grid-column:1/-1;
}

.item-4{
    grid-column:3/5;
}

.item-5{
    grid-column:1/4;
}

.item-8{
    grid-column:2/4;
}

Full code @https://codepen.io/Refath/pen/Odaovw?editors=1100 I expected the auto-fit and min-max properties to make my CSS Grid fully responsive, but I don't understand where I've gone wrong. Thanks.

Upvotes: 2

Views: 1071

Answers (1)

Seamus.Reeve
Seamus.Reeve

Reputation: 129

Well you have selectors for items 1,4,5, and 8. That is you state which rows and columns etc you'd like them to be in. Why not include this for all the items, so you can manually place them? It would only take a few minutes.

If you resize the screen they also move around as only some have a defined place, so perhaps try using media queries to resolve this. It might take a little while, to create CSS grids for a number of screen sizes, but would resolve the issue and would look great.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Upvotes: 1

Related Questions