I am trying to create my own grid using "grid-template-columns", in result when i resize the view items not centered.
I use this documentation 
Here code example what i am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Profile Card</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open Sans:400,600,700' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<style>
.my-grid {
display: flex;
justify-content: center;
align-content: center;
}
.my-container{
position: relative;
width: 1200px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.my-container .my-card{
width: 100%;
background: #fff;
border-radius: 20px;
max-width: 250px;
box-shadow: 0px 20px 70px 0px rgb(0 0 0 / 21%);
}
.my-container .my-card .imgBx {
position: relative;
width: 100%;
height: 310px;
overflow: hidden;
}
.my-container .my-card .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s ease-in-out;
transform-origin: right;
}
.my-container .my-card:hover .imgBx img {
transform: scale(1.5);
}
.my-container .my-card .my-content{
padding: 10px;
}
.my-container .my-card .my-content .my-product-name h3{
font-size: 18px;
font-weight: 500;
color: #333;
margin: 5px 0;
text-align: center;
}
.my-container .my-card .my-content .my-rating {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
padding: 15px;
}
.my-container .my-card .my-content .my-rating h2{
font-size: 20px;
color: #333;
font-weight: 500;
}
.my-action{
position: absolute;
top: 10px;
right: 10px;
}
.my-action li{
position: relative;
list-style: none;
width: 40px;
height: 40px;
background: #fff;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
margin: 4px;
cursor: pointer;
transition: transform 0.5s;
transform: translateX(60px);
}
.my-action li:nth-child(2){
transition-delay: 0.15s;
}
.my-action li:nth-child(3){
transition-delay: 0.3s;
}
.my-container .my-card:hover .my-action li{
transform: translateX(0px);
}
.my-action li:hover{
background: #a7389d;
color: #fff;
}
.my-action li span{
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%) translateX(-20px);
white-space: nowrap;
padding: 4px 60px;
background: #fff;
color: #333;
font-weight: 500;
font-size: 12px;
border-radius: 4px;
pointer-events: none;
opacity: 0;
transition: 0.5s;
}
.my-action li:hover span{
opacity: 1;
transform: translateY(-50%) translateX(0px);
}
.my-action li span::before{
content: ' ';
position: absolute;
top: 50%;
right: -4px;
width: 8px;
height: 8px;
background: #a7389d;
transform: translateY(-50%) rotate(50deg);
}
.app{
text-align: center;
}
.app h6{
display: inline-block;
}
.verified-label{
text-align: center;
}
.verified-label h6{
display: inline-block;
}
</style>
</head>
<body>
<div >
<div >
<div >
<div >
<img src="/test.jpg">
<ul >
<li>
<i ></i>
<span>View more</span>
</li>
<li>
<i ></i>
<span>2</span>
</li>
<li>
<div >
<a ></a>
</div>
</li>
</ul>
</div>
<div >
<div >
<h3>Test Name</h3>
</div>
<div >
<span >
<h6></h6>
</span>
</div>
<div >
<span >
<h6></h6>
</span>
</div>
<div >
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<img src="/test.jpg">
</div>
<div >
<div >
<h3>Test Name</h3>
</div>
<div >
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/pCard_script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>CodePudding user response：
Please add justify-items: center in my-container class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Profile Card</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open Sans:400,600,700' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<style>
.my-grid {
display: flex;
justify-content: center;
align-content: center;
}
.my-container{
position: relative;
width: 1200px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
padding: 20px;
justify-items: center;
}
.my-container .my-card{
width: 100%;
background: #fff;
border-radius: 20px;
max-width: 250px;
box-shadow: 0px 20px 70px 0px rgb(0 0 0 / 21%);
}
.my-container .my-card .imgBx {
position: relative;
width: 100%;
height: 310px;
overflow: hidden;
}
.my-container .my-card .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s ease-in-out;
transform-origin: right;
}
.my-container .my-card:hover .imgBx img {
transform: scale(1.5);
}
.my-container .my-card .my-content{
padding: 10px;
}
.my-container .my-card .my-content .my-product-name h3{
font-size: 18px;
font-weight: 500;
color: #333;
margin: 5px 0;
text-align: center;
}
.my-container .my-card .my-content .my-rating {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
padding: 15px;
}
.my-container .my-card .my-content .my-rating h2{
font-size: 20px;
color: #333;
font-weight: 500;
}
.my-action{
position: absolute;
top: 10px;
right: 10px;
}
.my-action li{
position: relative;
list-style: none;
width: 40px;
height: 40px;
background: #fff;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
margin: 4px;
cursor: pointer;
transition: transform 0.5s;
transform: translateX(60px);
}
.my-action li:nth-child(2){
transition-delay: 0.15s;
}
.my-action li:nth-child(3){
transition-delay: 0.3s;
}
.my-container .my-card:hover .my-action li{
transform: translateX(0px);
}
.my-action li:hover{
background: #a7389d;
color: #fff;
}
.my-action li span{
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%) translateX(-20px);
white-space: nowrap;
padding: 4px 60px;
background: #fff;
color: #333;
font-weight: 500;
font-size: 12px;
border-radius: 4px;
pointer-events: none;
opacity: 0;
transition: 0.5s;
}
.my-action li:hover span{
opacity: 1;
transform: translateY(-50%) translateX(0px);
}
.my-action li span::before{
content: ' ';
position: absolute;
top: 50%;
right: -4px;
width: 8px;
height: 8px;
background: #a7389d;
transform: translateY(-50%) rotate(50deg);
}
.app{
text-align: center;
}
.app h6{
display: inline-block;
}
.verified-label{
text-align: center;
}
.verified-label h6{
display: inline-block;
}
</style>
</head>
<body>
<div >
<div >
<div >
<div >
<img src="/test.jpg">
<ul >
<li>
<i ></i>
<span>View more</span>
</li>
<li>
<i ></i>
<span>2</span>
</li>
<li>
<div >
<a ></a>
</div>
</li>
</ul>
</div>
<div >
<div >
<h3>Test Name</h3>
</div>
<div >
<span >
<h6></h6>
</span>
</div>
<div >
<span >
<h6></h6>
</span>
</div>
<div >
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<img src="/test.jpg">
</div>
<div >
<div >
<h3>Test Name</h3>
</div>
<div >
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/pCard_script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>CodePudding user response：
justify-items aligns grid items along the row (inline) axis. Specifically, this property allows you to set alignment for items inside a grid container (not the grid itself) in a specific position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Profile Card</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open Sans:400,600,700' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<style>
.my-grid {
display: flex;
justify-content: center;
}
.my-container{
position: relative;
width: 1200px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
padding: 20px;
justify-items:center;
}
.my-container .my-card{
width: 100%;
background: #fff;
border-radius: 20px;
max-width: 250px;
box-shadow: 0px 20px 70px 0px rgb(0 0 0 / 21%);
}
.my-container .my-card .imgBx {
position: relative;
width: 100%;
height: 310px;
overflow: hidden;
}
.my-container .my-card .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s ease-in-out;
transform-origin: right;
}
.my-container .my-card:hover .imgBx img {
transform: scale(1.5);
}
.my-container .my-card .my-content{
padding: 10px;
}
.my-container .my-card .my-content .my-product-name h3{
font-size: 18px;
font-weight: 500;
color: #333;
margin: 5px 0;
text-align: center;
}
.my-container .my-card .my-content .my-rating {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
padding: 15px;
}
.my-container .my-card .my-content .my-rating h2{
font-size: 20px;
color: #333;
font-weight: 500;
}
.my-action{
position: absolute;
top: 10px;
right: 10px;
}
.my-action li{
position: relative;
list-style: none;
width: 40px;
height: 40px;
background: #fff;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
margin: 4px;
cursor: pointer;
transition: transform 0.5s;
transform: translateX(60px);
}
.my-action li:nth-child(2){
transition-delay: 0.15s;
}
.my-action li:nth-child(3){
transition-delay: 0.3s;
}
.my-container .my-card:hover .my-action li{
transform: translateX(0px);
}
.my-action li:hover{
background: #a7389d;
color: #fff;
}
.my-action li span{
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%) translateX(-20px);
white-space: nowrap;
padding: 4px 60px;
background: #fff;
color: #333;
font-weight: 500;
font-size: 12px;
border-radius: 4px;
pointer-events: none;
opacity: 0;
transition: 0.5s;
}
.my-action li:hover span{
opacity: 1;
transform: translateY(-50%) translateX(0px);
}
.my-action li span::before{
content: ' ';
position: absolute;
top: 50%;
right: -4px;
width: 8px;
height: 8px;
background: #a7389d;
transform: translateY(-50%) rotate(50deg);
}
.app{
text-align: center;
}
.app h6{
display: inline-block;
}
.verified-label{
text-align: center;
}
.verified-label h6{
display: inline-block;
}
</style>
</head>
<body>
<div >
<div >
<div >
<div >
<img src="/test.jpg">
<ul >
<li>
<i ></i>
<span>View more</span>
</li>
<li>
<i ></i>
<span>2</span>
</li>
<li>
<div >
<a ></a>
</div>
</li>
</ul>
</div>
<div >
<div >
<h3>Test Name</h3>
</div>
<div >
<span >
<h6></h6>
</span>
</div>
<div >
<span >
<h6></h6>
</span>
</div>
<div >
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<img src="/test.jpg">
</div>
<div >
<div >
<h3>Test Name</h3>
</div>
<div >
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
<div >
<i ></i>
<h2>168</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/pCard_script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>