So I need to make evenly spaced out elements for gallery but apparently 1vw =/= 2 * 0.5vw
.galeriacontainer {
position: absolute;
width: 80vw;
max-width: 80vw;
height: 75vh;
max-height: 75vh;
background-color: rgba(20, 20, 20, 0.4);
left: 10vw;
top: 12.5vh;
}
.itemframe {
width: 19vw;
max-width: 19vw;
height: 24vh;
max-height: 24vh;
margin-left: 0.5vw;
margin-top: 0.5vh;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
float: left;
overflow: hidden;
}<div class="galeriacontainer">
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
</div>So the gallery container is 80vw so if I want 4 divs evenly spaced out I do 80/4=20, 20-1=19, 1/2=0.5, right? I can't understand why it displays so strangely.
EDIT: My question is how to make it behave the way it should
This seems to be reasonably even, but it's not a very good solution, just fine-tuned sizes and margins.
.galeriacontainer {
position: absolute;
width: 80vw;
max-width: 80vw;
height: 75vh;
max-height: 75vh;
margin: 0;
padding: 0;
background-color: rgba(20, 20, 20, 0.4);
left: 10vw;
top: 12.5vh;
}
.itemframe {
width: 19.25vw;
height: 23.75vh;
margin-left: 0.6vw;
margin-top: 0.95vh;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
float: left;
overflow: hidden;
}<div class="galeriacontainer">
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
</div>