Is there a way to make this more responsive than it is?

Here is my code: https://codepen.io/serenuy/pen/qBxJGap

I've been trying to practice using grid in css, but when I want to make the purple box wider and I minimize my screen, the purple is not responsive, it just stays in place. I tried using grid-auto-rows: 100px; and also providing a max-width but it does not change anything. I have also tried wrapping a flexbox around the container div and applying the display: flex; with flex-direction but no changes as well.

I also noticed when removing the .purple css code, everything is responsive, so there is something I am missing or not adding in the .purple that needs to be added.

Any suggestions as to how I can make this responsive? Thanks!

.container {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    
}

.purple {
    grid-row: 3;
    grid-column: span 4;
}

/* .panda {
   grid-column-start: 5;
 }

.tiger {
   grid-column-start: 1;
 }
*/

 .fox {
    grid-row: 1 / span 2;
    grid-column: 1 / span 3;
 }

.zone {
    cursor:pointer;
    /*display:block;*/
    text-align: center;
    font-size:10em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.3s linear;
}

.zone:hover {
    -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}


/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
 *  Green Background
 **********************************************************************/
.green{
    background: #56B870; /* Old browsers */
    background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
    background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}

/***********************************************************************
 *  Red Background
 **********************************************************************/
.red{
    background: #C655BE; /* Old browsers */
    background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
    background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}

/***********************************************************************
 *  Yellow Background
 **********************************************************************/
.yellow{
    background: #F3AAAA; /* Old browsers */
    background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
    background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}

/***********************************************************************
 *  Blue Background
 **********************************************************************/
.blue{
    background: #7abcff; /* Old browsers */
    background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
    background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}

/***********************************************************************
 *  Purple Background
 **********************************************************************/
.purple {
    background: #A88BEB; /* Old browsers */
    background: -moz-linear-gradient(top, #A88BEB 0%, #F1A7F1 44%, #F8CEEC 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A88BEB), color-stop(44%,#F1A7F1), color-stop(100%,#F8CEEC)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* IE10+ */
    background: linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* W3C */
}

/***********************************************************************
 *  Brown Background
 **********************************************************************/
.brown {
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
    background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}

<body>
  <div class="container">
    <div class="zone green fox">🦊</div>
    <div class="zone red">🐰</div>
    <div class="zone blue">🐸</div>
    <div class="zone yellow">🦁</div>
    <div class="zone purple tiger">🐯</div>
    <div class="zone brown">🐭</div>
    <div class="zone green">🦄</div>
    <div class="zone red">🐲</div>
    <div class="zone blue">🐷</div>
    <div class="zone yellow">🐺</div>
    <div class="zone purple panda">🐼</div>
    <div class="zone brown">🐻</div>
  </div>
</body>

Solution

You’re telling the grid that all .purple boxes belong on grid-row: 3. If you want the grid to be able to respond better, you need to allow them to move. In this snippet I have removed that grid-row style rule.

If this still doesn't give you the effect you want, you can always set up a bunch of media queries for different widths, and for each of those widths, manually set the number of columns and manually position every item in your grid. It may not be pretty, but it will work and it might be your only choice.

.container {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    
}

.purple {
    grid-column: span 4;
}
.fox {
    grid-row: 1 / span 2;
    grid-column: 1 / span 3;
 }

.zone {
    cursor:pointer;
    /*display:block;*/
    text-align: center;
    font-size:10em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.3s linear;
}

.zone:hover {
    -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}


/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
 *  Green Background
 **********************************************************************/
.green{
    background: #56B870; /* Old browsers */
    background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
    background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}

/***********************************************************************
 *  Red Background
 **********************************************************************/
.red{
    background: #C655BE; /* Old browsers */
    background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
    background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}

/***********************************************************************
 *  Yellow Background
 **********************************************************************/
.yellow{
    background: #F3AAAA; /* Old browsers */
    background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
    background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}

/***********************************************************************
 *  Blue Background
 **********************************************************************/
.blue{
    background: #7abcff; /* Old browsers */
    background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
    background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}

/***********************************************************************
 *  Purple Background
 **********************************************************************/
.purple {
    background: #A88BEB; /* Old browsers */
    background: -moz-linear-gradient(top, #A88BEB 0%, #F1A7F1 44%, #F8CEEC 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A88BEB), color-stop(44%,#F1A7F1), color-stop(100%,#F8CEEC)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* IE10+ */
    background: linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* W3C */
}

/***********************************************************************
 *  Brown Background
 **********************************************************************/
.brown {
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
    background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}

<body>
  <div class="container">
    <div class="zone green fox">🦊</div>
    <div class="zone red">🐰</div>
    <div class="zone blue">🐸</div>
    <div class="zone yellow">🦁</div>
    <div class="zone purple tiger">🐯</div>
    <div class="zone brown">🐭</div>
    <div class="zone green">🦄</div>
    <div class="zone red">🐲</div>
    <div class="zone blue">🐷</div>
    <div class="zone yellow">🐺</div>
    <div class="zone purple panda">🐼</div>
    <div class="zone brown">🐻</div>
  </div>
</body>