Issue
My objective is to vertically center the following responsive matrix, so that both on the left and right will be the same distance to the edge of the screen (parent has a width of 100%). Could you please help? Thank you. My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>image matrix</title>
<style>
html, body{margin: 0; width: 100%; height: 100%;}
.container {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cell {
border: 0px solid darkred;
height: 50px;
width: 150px;
margin: 20px;
background-color: #058;
}
</style>
</head>
<body>
<!-- this program illustrates responsive design without the use of media queries -->
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</body>
</html>Solution
Using Flexbox, you can achieve the same with the following code. Your cells will always stay in the center and no need to use any media query as required.
html, body{
margin: 0; width: 100%;
height: 100%;
}
.container {
width: 100vw;
display: flex;
flex-wrap:wrap;
justify-content:center;
}
.cell {
border: 0px solid darkred;
height: 50px;
margin: 20px;
background-color: #058;
flex-basis:150px;
}<!-- this program illustrates responsive design without the use of media queries -->
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>CODEPEN LINK : https://codepen.io/emmeiWhite/pen/vYeZayL
Answered By - Imran Rafiq Rather
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.