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

Question

.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 class="skills">
<div class="skillz html">
<img src="" alt="">
<h3>html</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz css">
<img src="" alt="">
<h3>css</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz scss">
<img src="" alt="">
<h3>scss</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz javascript">
<img src="" alt="">
<h3>javascript</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz React">
<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.

Answer 1

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 class="skills">
<div class="skillz html">
<img src="" alt="">
<h3>html</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz css">
<img src="" alt="">
<h3>css</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz scss">
<img src="" alt="">
<h3>scss</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz javascript">
<img src="" alt="">
<h3>javascript</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz React">
<img src="" alt="">
<h3>React</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
</div>