How do i calculate maximum amount of items in grid box

Question

I'm making a small application. for that I need the optimal amount of items that could fit in my grid if the grid box had the size of the entire viewport height.

The data I have: item height and width, grid box width, viewport height.

the item dimensions stay the same on each screen size, the other values change.

the grid box gutter size is 20px or 1.25rem.

export const calcHitsPerPage = () => {
  
 const productCard = document.querySelector('.ProductCard____0JXki');
  let productCardWidth = productCard.offsetWidth;
  let productCardHeight = productCard.offsetHeight;
  
  const grid = document.querySelector('.ProductGrid____hZ3pR');
  let gridWidth = productCard.offsetWidth;

  var viewportWidth = window.innerWidth;
  var viewportHeight = window.innerHeight;
};

Answer 1

I'll make abstraction of things like grid width vs. viewport width, etc. because they're immaterial to the problem. You basically want to find out how many items of a given dimension (cardWidth * cardHeight) will fit into a container of another given dimension (totalWidth * totalHeight), provided that there needs to be a specified amount of spacing between the items (gutterSize).

You first need to determine the number of columns, i.e. how many cards will fit in a row. Basically, you're trying to find the maximum cols value that satisfies the following inequality:

(cols * cardWidth) + ((cols - 1) * gutterSize)) <= totalWidth

This equation can be rewritten as:

cols <= (totalWidth + gutterSize) / (cardWidth + gutterSize)

In JavaScript this would be:

const totalWidth = 500;
const cardWidth = 40;
const gutterSize = 25;

const cols = Math.floor((totalWidth + gutterSize) / (cardWidth + gutterSize));

console.log(cols); // 8

The logic for the number of rows is exactly the same. You need to find the maximum rows value that satisfies:

(rows * cardHeight) + ((rows - 1) * gutterSize)) <= totalHeight

Which can be rewritten as:

rows <= (totalHeight + gutterSize) / (cardHeight + gutterSize)

Or in JavaScript:

const totalHeight = 800;
const cardHeight = 60;
const gutterSize = 25;

const rows = Math.floor((totalHeight + gutterSize) / (cardHeight + gutterSize));

console.log(rows); // 9

Then, calculating the number of cards is just a matter of multiplying both values:

cards = rows * cols

Everything put together, in JavaScript it would look like this:

const totalWidth = 500;
const totalHeight = 800;
const cardWidth = 40;
const cardHeight = 60;
const gutterSize = 25;

const cols = Math.floor((totalWidth + gutterSize) / (cardWidth + gutterSize));
const rows = Math.floor((totalHeight + gutterSize) / (cardHeight + gutterSize));
const cards = rows * cols;

console.log(cards); // 72

Answer 2

1. each line cover with div and give some class name
2. then $('.rowdiv').each(function(){}); -- this is jquery , you can use js if want.
3. in this function, use this.find('.itembox').length, so that you can calculate each line contain number of box. please comment if query