How should I set the width of these elements so that they fit perfectly?

Question

I am building a website with a set of squares in a grid shape. I would like them to be perfect squares, with equal width and height. It works very well, except they flash between fitting two and three on a line when you resize the page. Here is the code:

const get = (querySelector) => document.querySelector(querySelector),
      getAll = (querySelector) => document.querySelectorAll(querySelector),
      getClass = (className) => document.getElementsByClassName(className),
      getTag = (tagName) => document.getElementsByTagName(tagName);
function resizePosts() {
    if (get('.post')) {
        for (let i = 0; i < getClass('post').length; i++) {
            getClass('post')[i].style.width = getClass('post')[i].parentElement.offsetWidth/3-10.982;
            getClass('post')[i].style.height = getClass('post')[0].offsetWidth;
        }
    }
    window.addEventListener('resize', resizePosts, false);
}
window.addEventListener('load', resizePosts, false);
window.addEventListener('resize', resizePosts, false);

.posts {
    font-size: 2.5em;
    font-family: 'Lato', sans-serif;
    padding: 0 25px;
    flex-wrap: wrap;
    display: flex;
    min-height: 150px;
}
.posts-themselves {
    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-themselves'>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
  </div>
</div>

Please help me set it to the correct size!

You don't need JS to make squares in CSS (or any other ratio for that matter) - try a percentage padding technique as described here: https://stackoverflow.com/a/17158088/126963 — Olex Ponomarenko, Oct 28 '19 at 17:59

score 2 · Accepted Answer · answered Oct 28 '19 at 18:08

You need to add the unit of measure of the dimensions ("px")

const get = (querySelector) => document.querySelector(querySelector),
      getAll = (querySelector) => document.querySelectorAll(querySelector),
      getClass = (className) => document.getElementsByClassName(className),
      getTag = (tagName) => document.getElementsByTagName(tagName);
function resizePosts() {
    if (get('.post')) {
        for (let i = 0; i < getClass('post').length; i++) {
            getClass('post')[i].style.width = getClass('post')[i].parentElement.offsetWidth/3-10.982 +"px";
            getClass('post')[i].style.height = getClass('post')[0].style.width;
        }
    }
}
window.addEventListener('load', resizePosts, false);
window.addEventListener('resize', resizePosts, false);

.posts {
    font-size: 2.5em;
    font-family: 'Lato', sans-serif;
    padding: 0 25px;
    flex-wrap: wrap;
    display: flex;
    min-height: 150px;
}
.posts-themselves {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.post {
    border: 0.5px solid black;
    margin: 5px;
    overflow: hidden;
}

<div class = 'posts'>
  <div class = 'posts-themselves'>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
  </div>
</div>

thanks, I just fixed myself anyway. just added rows and got rid of flex-wrap. — ezra, Oct 28 '19 at 18:10

How should I set the width of these elements so that they fit perfectly?

1 Answers1