<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.skills{
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
place-content: center;
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);
}
.Top-skills{
width: min(95%, 70rem);
margin: 150px auto;
text-align: center;
position: relative;
}
@media screen and (min-width:1024px){
.skills{
margin: 0 auto;
width: min(95%, 70rem);
gap: 20px;
max-width: 400px;
grid-template-columns: 1fr 1fr 1fr;
place-content: center;
grid-template-areas:
'one1 two2'
'three3 four4'
'five5 .'
;
}
}
</style>
<body>
<div class="Top-skills">
<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>
</div>
</body>
</html>
Trying to achieve centered grid contents with equal sizes on all screens. Challenges with responsiveness and grid sizing when reaching 768px. Seeking solutions for mobile-first design.