Currently, I am in the process of creating a Grid Layout for the Homescreen of my Website and so far everything is working fine. Six Images are positioned loosely on the screen and scaling properly. But whenever I attempt to add text in the container below one of the images, each image changes its size. Additionally, they all behave differently even when just a few letters are added.
Take note of how the pictures react when text is added in the
<div class="hometext01">HTML:
<div class="homescreen2">
<div class="homeimg01 hometransition"></div>
<div class="hometext01">test test test</div>
<div class="homeimg02 hometransition"></div>
<div class="homeimg03 hometransition"></div>
<div class="homeimg04 hometransition"></div>
<div class="homeimg05 hometransition"></div>
<div class="homeimg06 hometransition"></div>
</div>
CSS:
.homescreen2 {
display: grid;
grid-gap: 0px;
width: 100%;
height: 100vh;
padding-top: 110px;
background-color: rgba(250,250,250,1.00);
grid-template-columns:auto auto auto auto
auto auto auto auto
auto auto auto auto
auto auto auto auto
auto auto auto auto
auto auto auto auto
auto auto auto auto
auto auto auto;
grid-template-rows:
auto auto auto auto
auto auto auto auto
auto auto auto auto
auto auto auto auto
auto;
}