How to solve problem with images "climbing"(overlaying) on one another? - css

Question

When I try to image gallery on trial website using CSS grid, images overlay one another to such extent that is a pain to see.
I tried to check classes and how they interact and everything should be ok. When I delete code of CSS grid, everything starts looking normal, although the sizes of the images are different.
Before:
After:
I would like to make them symmetrical, but don't know what to do. Perhaps, there is an error in managing the sizes of images themselves? But when I tried to make them with the same width and height, nothing changes.
Thank you for help in advance and if there are some inconveniences in post, let me know so I wont do the same mistake in the future.
Code:
body {
margin: auto 0px;
}
.zone {
cursor: pointer;
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}
/*Navigation cosumize*/
.navigation {
display: flex;
list-style: none;
font-size: 1em;
margin: 0px;
}
#media only screen and (max-width: 600px) {
.navigation {
font-size: 0.5em;
padding: 0;
}
}
.end {
margin-left: auto;
}
li {
padding: 10px;
}
a {
color: white;
text-decoration: none;
}
/*Cover*/
.red {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}
/*Project's grid*/
.for-grid {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
img {
width: 100%
}
.box {
background-color: #444;
padding: 100px;
margin: 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green {
background: #56B870;
/* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* IE10+ */
background: linear-gradient(top, #56B870 0%, #a5c956 100%);
/* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red {
background: #C655BE;
/* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* IE10+ */
background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow {
background: #F3AAAA;
/* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* IE10+ */
background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue {
background: #7abcff;
/* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* IE10+ */
background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="zone green">
<ul class="navigation">
<li>
About
</li>
<li>
Products
</li>
<li>
Our team
</li>
<li class="end">
Contact
</li>
</ul>
</nav>
<div class="zone red">Cover</div>
<div class="zone blue for-grid">
<img class="box zone" src="https://i.ibb.co/qWr3CYq/data-storage-2-2.png">
<img class="box zone" src="https://i.ibb.co/fGcNpN7/desktop-analytics-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/mtXHQ8C/files-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/wyCktLv/monitor-coding-2.png">
<img class="box zone" src="https://i.ibb.co/M9Qkn6G/monitor-settings-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/k0VNnBN/server-2-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/HKHcrdH/server-3.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/b7s4NPN/server-safe-2.png" alt="product image">
</div>
<div class="zone yellow">Footer</div>
</body>
</html>

Answer 1

css
.box {
box-sizing: border-box;
}
Here is some information about the box model that will help you understand why this might work
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model