How can I make my grid layout stack for mobile?

Question

Netlify of the current state of the school project i am working on with: school project site

If you open the project site, you will see 5 boxed next to each other where it all have "limited" written in them.

I have made the parent (div.section2) as grid. but clearly there is something missing that does not make it responsive. I wonder how to set it up to be responsive, that the boxes appear under each other on smaller screen-size but also have gap in between when it appear under each other.

Here is the code for that section:

.section2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20%);
}

.men__limited,
.women__limited,
.junior__limited,
.gears__limited,
.explore__limited {
  font-family: var(--nav-font);
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  margin: 0;
  
}

.men__limited > a > img,
.women__limited > a > img,
.junior__limited > a > img,
.gears__limited > a > img,
.explore__limited > a > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  height: 100%;
}

.men__limited > a > .men__limited--title > h1,
.women__limited > a > .men__limited--title > h1,
.junior__limited > a > .men__limited--title> h1,
.gears__limited > a > .men__limited--title > h1,
.explore__limited > a > .men__limited--title > h1 {
  position: absolute;
  top: 20%; /* these lines centers text*/
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--black-color);
  font-size: 2rem;
}

.men__limited > a > .men__limited--title,
.women__limited > a > .men__limited--title,
.junior__limited > a > .men__limited--title,
.gears__limited > a > .men__limited--title,
.explore__limited > a > .men__limited--title,
.vip > .men__limited--title {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 100;
  transition: all 0.4s;
  z-index: 4;
}

.men__limited > a > .men__limited--title:hover,
.women__limited > a > .men__limited--title:hover,
.junior__limited > a > .men__limited--title:hover,
.gears__limited > a > .men__limited--title:hover,
.explore__limited > a > .men__limited--title:hover {
  background-color: rgba(173, 173, 173, 0.4);
  opacity: 100;
  transition: all 0.4s;
  z-index: 4;
}

.men__limited > a > .limited__btn,
.women__limited > a > .limited__btn,
.junior__limited > a > .limited__btn,
.gears__limited > a > .limited__btn,
.explore__limited > a > .limited__btn,
.vip > a > .limited__btn {
  background: transparent;
  background-color: rgb(255, 255, 255, 0.5);
  border: 1px solid rgb(112, 112, 112, 0.8);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--black-color);
  display: absolute;
  height: 4rem;
  font-size: 1.4em;
  font-weight: 600;

  position: relative;
  text-decoration: none;
  width: 14rem;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-transform: uppercase;
  cursor: pointer;
}


.men__limited > a > .limited__btn:hover,
.women__limited > a > .limited__btn:hover,
.junior__limited > a > .limited__btn:hover,
.gears__limited > a > .limited__btn:hover,
.explore__limited > a > .limited__btn:hover,
.vip > a > .limited__btn:hover  {
  background-color: var(--white-color);
 
}


.men__limited--title > h1 {
  position: absolute;
  top: 40%; /* these lines centers text*/
  left: 50%;
  transform: translate(-50%, -50%);
}

<section class="section2">
        <div class="men__limited">
          <a href="#"
            ><img src="img/men-limited.jpg" alt="" />
            <div class="men__limited--title">
              <h3>
                LIMITED MEN <br />
                OFFERS
              </h3>
            </div>

            <button class="limited__btn">Explore Now</button></a
          >
        </div>
        <div class="women__limited">
          <a href="#"
            ><img src="img/women-limited.jpg" alt="" />
            <div class="men__limited--title"><h3>LIMITED WOMEN OFFERS</h3></div>
            <button class="limited__btn">Explore Now</button></a
          >
        </div>
        <div class="junior__limited">
          <a href="#"
            ><img src="img/junior-limited.jpg" alt="" />
            <div class="men__limited--title"><h3>LIMITED JUNIOR OFFERS</h3></div>
            <button class="limited__btn">Explore Now</button></a
          >
        </div>
        <div class="gears__limited">
          <a href="#"
            ><img src="img/gears-limited.jpg" alt="" />
            <div class="men__limited--title"><h3>LIMITED GEARS OFFERS</h3></div>
            <button class="limited__btn">Explore Now</button></a
          >
        </div>
        <div class="explore__limited">
          <a href="#"
            ><img src="img/explore-limited.jpg" alt="" />
            <div class="men__limited--title"><h3>LIMITED ADVENTURE OFFERS</h3></div>
            <button class="limited__btn">Explore Now</button></a
          >
        </div>
      </section>

Answer 1

You specify 20% in the rule grid-template-columns: repeat (auto-fit, 20%), so your boxes will not be responsive when the screen size changes. I gave an example using media queries. Was it necessary?

.section2 {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, 20%);*/
  grid-template-columns: repeat(5, 1fr);
}

.men__limited,
.women__limited,
.junior__limited,
.gears__limited,
.explore__limited {
  font-family: var(--nav-font);
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  margin: 0;
  
}

.men__limited > a > img,
.women__limited > a > img,
.junior__limited > a > img,
.gears__limited > a > img,
.explore__limited > a > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  height: 100%;
}

.men__limited > a > .men__limited--title > h1,
.women__limited > a > .men__limited--title > h1,
.junior__limited > a > .men__limited--title> h1,
.gears__limited > a > .men__limited--title > h1,
.explore__limited > a > .men__limited--title > h1 {
  position: absolute;
  top: 20%; /* these lines centers text*/
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--black-color);
  font-size: 2rem;
}

.men__limited > a > .men__limited--title,
.women__limited > a > .men__limited--title,
.junior__limited > a > .men__limited--title,
.gears__limited > a > .men__limited--title,
.explore__limited > a > .men__limited--title,
.vip > .men__limited--title {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 100;
  transition: all 0.4s;
  z-index: 4;
}

.men__limited > a > .men__limited--title:hover,
.women__limited > a > .men__limited--title:hover,
.junior__limited > a > .men__limited--title:hover,
.gears__limited > a > .men__limited--title:hover,
.explore__limited > a > .men__limited--title:hover {
  background-color: rgba(173, 173, 173, 0.4);
  opacity: 100;
  transition: all 0.4s;
  z-index: 4;
}

.men__limited > a > .limited__btn,
.women__limited > a > .limited__btn,
.junior__limited > a > .limited__btn,
.gears__limited > a > .limited__btn,
.explore__limited > a > .limited__btn,
.vip > a > .limited__btn {
  background: transparent;
  background-color: rgb(255, 255, 255, 0.5);
  border: 1px solid rgb(112, 112, 112, 0.8);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--black-color);
  display: absolute;
  height: 4rem;
  font-size: 1.4em;
  font-weight: 600;

  position: relative;
  text-decoration: none;
  width: 14rem;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-transform: uppercase;
  cursor: pointer;
}


.men__limited > a > .limited__btn:hover,
.women__limited > a > .limited__btn:hover,
.junior__limited > a > .limited__btn:hover,
.gears__limited > a > .limited__btn:hover,
.explore__limited > a > .limited__btn:hover,
.vip > a > .limited__btn:hover  {
  background-color: var(--white-color);
 
}


.men__limited--title > h1 {
  position: absolute;
  top: 40%; /* these lines centers text*/
  left: 50%;
  transform: translate(-50%, -50%);
}

@media(max-width: 1500px){
  .section2 {
    grid-template-columns: repeat(4, 1fr);
   }
}

@media(max-width: 1300px){
  .section2 {
    grid-template-columns: repeat(3, 1fr);
   }
}

@media(max-width: 900px){
    .section2 {
    grid-template-columns: repeat(2, 1fr);
   }
}

@media(max-width: 500px){
    .section2 {
    grid-template-columns: repeat(1, 1fr);
   }
}

<section class="section2">
        <div class="men__limited">
          <a href="#"
            ><img src="img/men-limited.jpg" alt="" />
            <div class="men__limited--title">
              <h3>
                LIMITED MEN <br />
                OFFERS
              </h3>
            </div>

            <button class="limited__btn">Explore Now</button></a
          >
        </div>
        <div class="women__limited">
          <a href="#"
            ><img src="img/women-limited.jpg" alt="" />
            <div class="men__limited--title"><h3>LIMITED WOMEN OFFERS</h3></div>
            <button class="limited__btn">Explore Now</button></a
          >
        </div>
        <div class="junior__limited">
          <a href="#"
            ><img src="img/junior-limited.jpg" alt="" />
            <div class="men__limited--title"><h3>LIMITED JUNIOR OFFERS</h3></div>
            <button class="limited__btn">Explore Now</button></a
          >
        </div>
        <div class="gears__limited">
          <a href="#"
            ><img src="img/gears-limited.jpg" alt="" />
            <div class="men__limited--title"><h3>LIMITED GEARS OFFERS</h3></div>
            <button class="limited__btn">Explore Now</button></a
          >
        </div>
        <div class="explore__limited">
          <a href="#"
            ><img src="img/explore-limited.jpg" alt="" />
            <div class="men__limited--title"><h3>LIMITED ADVENTURE OFFERS</h3></div>
            <button class="limited__btn">Explore Now</button></a
          >
        </div>
      </section>