Grid template areas isn't working in media queries-CodePudding

.skills {
  display: grid;
  gap: 1.5rem;
  max-width: 300px;
  margin: 0 auto;
  grid-template-areas: 'one1' 'two2' 'three3' 'four4' 'five5';
}

.skillz:nth-child(1) {
  grid-area: one1;
}

.skillz:nth-child(2) {
  grid-area: two2;
}

.skillz:nth-child(3) {
  grid-area: three3;
}

.skillz:nth-child(4) {
  grid-area: four4;
}

.skillz:nth-child(5) {
  grid-area: five5;
}

.content-head_links {
  display: none;
}

.skillz {
  border-radius: 10px;
  padding: 20px;
  box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
  -webkit-box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
  -moz-box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
  transition: 250ms;
}

.skillz:hover {
  transform: translateY(5px);
}

@media screen and (min-width:1024px) {
  .skills {
    max-width: 300px;
    grid-template-columns: 1fr;
    grid-template-areas: 'one1 two2 three3' 'four4 five5';
  }
}

<div >

  <div >
    <img src="" alt="">
    <h3>html</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>
  <div >
    <img src="" alt="">
    <h3>css</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>
  <div >
    <img src="" alt="">
    <h3>scss</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>
  <div >
    <img src="" alt="">
    <h3>javascript</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>
  <div >
    <img src="" alt="">
    <h3>React</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>

</div>

So as you can see here, I tried to change the layout of the grid in the media query, But it isn't working, When the screen size becomes 1024px, The layout doesn't change, Despite me changing the grid template areas format, I don't know if it's something I am missing. And whenever I set the grid template column:1fr; it doesn't change in any way.

CodePudding user response：

grid-template-areas must form a rectangle, i.e. have the same amount of columns in each row.

.skills {
  display: grid;
  gap: 1.5rem;
  max-width: 300px;
  margin: 0 auto;
  grid-template-areas: 'one1' 'two2' 'three3' 'four4' 'five5';
}

.skillz:nth-child(1) {
  grid-area: one1;
}

.skillz:nth-child(2) {
  grid-area: two2;
}

.skillz:nth-child(3) {
  grid-area: three3;
}

.skillz:nth-child(4) {
  grid-area: four4;
}

.skillz:nth-child(5) {
  grid-area: five5;
}

.content-head_links {
  display: none;
}

.skillz {
  border-radius: 10px;
  padding: 20px;
  box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
  -webkit-box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
  -moz-box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
  transition: 250ms;
}

.skillz:hover {
  transform: translateY(5px);
}

@media screen and (min-width:1024px) {
  .skills {
    max-width: 300px;
    grid-template-columns: 1fr;
        grid-template-areas:
    "one1 two2 three3"
    "four4 five5 none";
  }
}

<div >

  <div >
    <img src="" alt="">
    <h3>html</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>
  <div >
    <img src="" alt="">
    <h3>css</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>
  <div >
    <img src="" alt="">
    <h3>scss</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>
  <div >
    <img src="" alt="">
    <h3>javascript</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>
  <div >
    <img src="" alt="">
    <h3>React</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
  </div>

</div>