This is what my site currently looks like:
I am trying to make the boxes a fixed square width and want them to be always centered horizontally and vertically. either like
[] [] [] []
or
[] []
[] []
currently they slope to the side:
Is there a way to make this work without javascript?
current html:
<div class="grid-item">
<a href="https://download.tails.net/tails/stable/tails-amd64-6.0/tails-amd64-6.0.img">
<img class="app-image" src="assets/tails.png" height="100px">
<div class="app-title">Tails 6</div>
<div class="app-description">Amnesic live system.</div>
</a>
</div>
current css:
html {
height: 100%;
background-color: #0f0f0f;
margin: 0;
}
.body-default {
color: #fff;
display: flex;
height: 100%;
justify-content: center ;
align-items: center;
margin: 0;
font-family: sans-serif;
}
.grid-container {
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 200px;
grid-gap: 20px;
width: 100%;
justify-content: center;
align-items: center;
}
.grid-item {
border: 2px solid #4e4e4e;
padding: 5px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border-radius: 12.5px;
background-color: #242424;
transition: transform 0.2s cubic-bezier(0,.75,.25,1);
transform-origin: center;
backface-visibility: hidden;
transform: translateZ(0);
-webkit-font-smoothing: subpixel-antialiased;
}
.app-title {
font-weight: bold;
font-size:15px;
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.app-description {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #808080;
}
.app-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: 100px;
margin: auto;
padding: 10px;
}
.grid-item:hover {
transform: scale(1.05);
}
.centered-box {
text-align: center;
margin: 0 auto;
width: 50%;
padding: 20px;
}