I'm currently working on a website where I have arranged squares in a grid layout. My goal is to make these squares perfect, with equal width and height. The only issue I'm encountering is that they tend to change between fitting two and three squares per line when resizing the page. Below is the code snippet:
const select = (querySelector) => document.querySelector(querySelector),
selectAll = (querySelector) => document.querySelectorAll(querySelector),
getByClass = (className) => document.getElementsByClassName(className),
getByTag = (tagName) => document.getElementsByTagName(tagName);
function adjustSize() {
if (select('.post')) {
for (let i = 0; i < getByClass('post').length; i++) {
getByClass('post')[i].style.width = getByClass('post')[i].parentElement.offsetWidth/3-10.982;
getByClass('post')[i].style.height = getByClass('post')[0].offsetWidth;
}
}
window.addEventListener('resize', adjustSize, false);
}
window.addEventListener('load', adjustSize, false);
window.addEventListener('resize', adjustSize, false);.posts {
font-size: 2.5em;
font-family: 'Lato', sans-serif;
padding: 0 25px;
flex-wrap: wrap;
display: flex;
min-height: 150px;
}
.posts-items {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.post {
border: 0.5px solid black;
margin: 5px;
width: 33%;
overflow: hidden;
}<div class = 'posts'>
<div class = 'posts-items'>
<div class = 'post'>
</div>
<div class = 'post'>
</div>
<div class = 'post'>
</div>
<div class = 'post'>
</div>
</div>
</div>I would appreciate any assistance in ensuring that the squares maintain the correct size!