Avoid filling the container with an excessive amount of grids while maintaining the correct aspect ratio

Question

Avoid filling the container with an excessive amount of grids while maintaining the correct aspect ratio

I encountered a situation where I needed to dynamically create a grid with square grids of dimensions MxN. Below is the code snippet for achieving this:

rerender = (event) => {
  const height = document.getElementById("y-input").value;
  const width = document.getElementById("x-input").value;

  console.log(`${height} :: ${width}`);

  const cellContainer = document.getElementById("cell-container");

  cellContainer.style.gridTemplateRows = `repeat(${height}, 1fr)`;
  cellContainer.style.gridTemplateColumns = `repeat(${width}, 1fr)`;

  cellContainer.innerHTML = "";
  [...Array(height * width).keys()]
    .map(() => document.createElement('div'))
    .map((e) => {
      e.className = "cell";
      return e
    })
    .map((e) => cellContainer.appendChild(e))
}

#grid-container {
  width: 500px;
  height: 500px;
  background-color: aqua;
  padding: 8px;
}

#cell-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.cell {
  background-color: blue;
  min-width: 4px;
  min-height: 4px;
  margin: 1px;
  aspect-ratio: 1/1;
}

<div>
  <label for="x-input">width</label>
  <input value=2 min=1 max=50 type="number" name="x" id="x-input" style="width: 4ch;" onchange="rerender(event)">
  <label for="y-input">height</label>
  <input value=2 min=1 max=50 type="number" name="y" id="y-input" style="width: 4ch;" onchange="rerender(event)">
</div>

<div id="grid-container">
  <div id="cell-container">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

I am utilizing a grid layout where the number of rows and columns can be adjusted dynamically using the following code:

cellContainer.style.gridTemplateRows = `repeat(${height}, 1fr)`;
cellContainer.style.gridTemplateColumns = `repeat(${width}, 1fr)`;

The cells are kept square by using the aspect-ratio property. This approach works well for square grids and also when dealing with rectangular cases where the width is greater than the height.

In cases where the height is greater than the width (rectangular), there is an overflow issue. How can this overflow be prevented?

View Example Here

https://i.sstatic.net/Y56mm.png

javascript html css

Answer 1

Answer №1

Summary

To solve this problem where everything is a square, we can use fake rows and columns to properly size the cells. The solution is provided at the end of this post.

Explanation

Problem Overview

From what I gather, the requirement is to have

a grid of W×H cells
fitting within an N×N pixels square
where each cell is a square

Current Working State

In the scenario where you have a working solution, like say W=3; H=2, the output resembles this:

https://i.sstatic.net/HX7Pu.png

CSS Refactoring Approach

Assuming we aim for a pure-CSS solution, the plan is to modify the JS to provide CSS custom properties and then continue with CSS reasoning:

setting --per-row as the number of cells in a row,
setting --per-col as the number of cells in a column.

grid.style.setProperty('--per-row', width);
grid.style.setProperty('--per-col', height);

#grid {
  --per-row: 2;
  --per-col: 2;
  grid-template-columns: repeat(var(--per-row), 1fr);
  grid-template-rows: repeat(var(--per-col), 1fr);
}

PS: irrelevant lines have been omitted from code snippets.

Addressing the Problem

The issue arises when H > W, as seen in the W=2; H=3 example. The goal is to achieve proper grid alignment. To resolve this, we utilize the CSS max() function:

#grid {
  --per-row: 2;
  --per-col: 2;
  --max: max(var(--per-row), var(--per-col));
  grid-template-columns: repeat(var(--max), 1fr);
  grid-template-rows: repeat(var(--max), 1fr);
}

...

Solution

Below is your original code with the modifications described in this post.

rerender = (event) => {
  const height = document.getElementById("y-input").value;
  const width = document.getElementById("x-input").value;
  const grid = document.getElementById("grid");

  grid.style.setProperty('--per-row', width);
  grid.style.setProperty('--max', Math.max(width, height));

  grid.innerHTML = "";
  [...Array(height * width).keys()]
    .forEach(() => {
      const e = document.createElement('div')
      e.className = "cell";
      grid.appendChild(e)
    })
}

#container {
  width: 500px;
  height: 500px;
  background-color: aqua;
  padding: 8px;
}

#grid {
  display: grid;
  height: 100%;
  --per-row: 2;
  --max: 2;
  grid-template-columns: repeat(var(--per-row), calc(100% / var(--max)));
  grid-auto-rows: calc(100% / var(--max));
  gap: 2px;
}

.cell {
  background-color: blue;
  aspect-ratio: 1/1;
}

<div>
  <label for="x-input">width</label>
  <input value=2 min=1 max=50 type="number" name="x" id="x-input" style="width: 4ch;" onchange="rerender(event)">
  <label for="y-input">height</label>
  <input value=2 min=1 max=50 type="number" name="y" id="y-input" style="width: 4ch;" onchange="rerender(event)">
</div>

<div id="container">
  <div id="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Answer 2

Summary

To solve this problem where everything is a square, we can use fake rows and columns to properly size the cells. The solution is provided at the end of this post.

Explanation

Problem Overview

From what I gather, the requirement is to have

a grid of W×H cells
fitting within an N×N pixels square
where each cell is a square

Current Working State

In the scenario where you have a working solution, like say W=3; H=2, the output resembles this:

https://i.sstatic.net/HX7Pu.png

CSS Refactoring Approach

Assuming we aim for a pure-CSS solution, the plan is to modify the JS to provide CSS custom properties and then continue with CSS reasoning:

setting --per-row as the number of cells in a row,
setting --per-col as the number of cells in a column.

grid.style.setProperty('--per-row', width);
grid.style.setProperty('--per-col', height);

#grid {
  --per-row: 2;
  --per-col: 2;
  grid-template-columns: repeat(var(--per-row), 1fr);
  grid-template-rows: repeat(var(--per-col), 1fr);
}

PS: irrelevant lines have been omitted from code snippets.

Addressing the Problem

The issue arises when H > W, as seen in the W=2; H=3 example. The goal is to achieve proper grid alignment. To resolve this, we utilize the CSS max() function:

#grid {
  --per-row: 2;
  --per-col: 2;
  --max: max(var(--per-row), var(--per-col));
  grid-template-columns: repeat(var(--max), 1fr);
  grid-template-rows: repeat(var(--max), 1fr);
}

...

Solution

Below is your original code with the modifications described in this post.

rerender = (event) => {
  const height = document.getElementById("y-input").value;
  const width = document.getElementById("x-input").value;
  const grid = document.getElementById("grid");

  grid.style.setProperty('--per-row', width);
  grid.style.setProperty('--max', Math.max(width, height));

  grid.innerHTML = "";
  [...Array(height * width).keys()]
    .forEach(() => {
      const e = document.createElement('div')
      e.className = "cell";
      grid.appendChild(e)
    })
}

#container {
  width: 500px;
  height: 500px;
  background-color: aqua;
  padding: 8px;
}

#grid {
  display: grid;
  height: 100%;
  --per-row: 2;
  --max: 2;
  grid-template-columns: repeat(var(--per-row), calc(100% / var(--max)));
  grid-auto-rows: calc(100% / var(--max));
  gap: 2px;
}

.cell {
  background-color: blue;
  aspect-ratio: 1/1;
}

<div>
  <label for="x-input">width</label>
  <input value=2 min=1 max=50 type="number" name="x" id="x-input" style="width: 4ch;" onchange="rerender(event)">
  <label for="y-input">height</label>
  <input value=2 min=1 max=50 type="number" name="y" id="y-input" style="width: 4ch;" onchange="rerender(event)">
</div>

<div id="container">
  <div id="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Avoid filling the container with an excessive amount of grids while maintaining the correct aspect ratio

Answer №1

Summary

Explanation

Problem Overview

Current Working State

CSS Refactoring Approach

Addressing the Problem

Solution

Similar questions

The x-axis in c3.js is experiencing issues with plotting when there is interval data in DST time

Emphasize rows in the MUI-Datatables framework

Obtaining Data from an Array with Reactive Forms in Angular 4

The Angular $http.jsonp() function can only be executed one time

Tips for creating a horizontal list within a collapsible card

Creating a nested list component using an array of objects

Issues with IE7 related to Jquery and potentially HTML as well

Adding a personalized service into a separate service within Angular 2

Can you provide guidance on showcasing mongodb data in a flask template with flask_pymongo?

Is it possible to continuously generate webpages using AJAX?

there is no minimum height specified for the table

The modal appears on the screen prior to the content being shown

Inquiry about how TypeScript handles object property references when passed into functions

Make sure to deselect all other radio buttons when selecting one, running into difficulties

variable containing a combination of left-to-right and right-to-left characters

What is the best way to assign a single class from an array to every list item in a particular sequence?

Activate the toggle menu

The SourceMap in DevTools encountered a parsing error with the message: "chrome-extension

Managing varied PHP submissions using a single 'isset' declaration

Skipping the validation of a variable in a return statement with Angular and Javascript