Customizable centered box grid in html/css?

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:

enter image description here

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;}