The nodes on a 2-dimensional grid overlap each other when the browser window is resized

In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window.

I am looking for a solution to automatically resize all nodes based on changes in the window size. Can anyone provide assistance?

grid.jsx

const Grid = ({ grid }) => {
  return (
    <div className="grid">
      {grid.map((row, rowIdx) => {
        return (
          <div className="cur-row" key={rowIdx}>
            {row.map((node) => (
              <Node node={node} />
            ))}
          </div>
        );
      })}
    </div>
  );
};

node.jsx

const Node = ({ node }) => {
  return (
    <div className="node"></div>
  );
};

css file

.grid {
  overflow: hidden;
  position: absolute;
  left: 20px;
  align-content: flex-start;
  justify-content: center;
  margin-top: 50px;
}

.cur-row {
  height: 23px;
}

.node {
  width: 23px;
  height: 23px;
  border: 1px solid rgb(175, 216, 248);
  display: inline-block;
}

Here is the grid when running the app: https://i.sstatic.net/qJLZF.png

And here is the grid when opening the console window: https://i.sstatic.net/gX9CD.png Some nodes are visibly overlapping with one another in the latter scenario.

I need a solution that will dynamically adjust the node sizes based on the window dimensions. Can someone provide guidance?

Answer №1

You have the option to utilize both Grid layout and Flexbox layout in order to achieve your desired outcome. Here is a sample code snippet demonstrating the use of CSS display: grid property.

/* This code snippet is for demonstration purposes only, disregard if you already have React code */
let cols = 64;
let rows = 24;
let gridEl = document.querySelector('.grid');

for (let i = 1; i <= 24; i++) {
  gridEl.innerHTML += `<div class="grid-row"></div>`;
}

document.querySelectorAll('.grid-row').forEach(function(item) {
  for (let j = 1; j <= 64; j++) {
    item.innerHTML += `<div class="grid-column"></div>`;
  }
});
:root {
  --grid-container: 1023px;
  --column-size: 23px;
  --column-count: 64;
  --border-color: rgb(175, 216, 248);
}

.grid {
  margin: 20px auto;
  max-width: var(--grid-container);
  overflow: auto;
  /* Enable scroll if necessary for responsive design */
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
}

.grid-column {
  height: var(--column-size);
  width: var(--column-size);
  border: 1px solid var(--border-color);
}
<div class="grid"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

After successfully developing a Universal Windows Platform app in Visual Studio using WinJS, JavaScript, CSS and HTML, I am now interested in leveraging the same code base to create an Android application. Could you guide me on the necessary steps to run ...

Navigate to another HTML division using data-toggle

I have 2 HTML documents index.html and services.html In services.html, I have the following code: <a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a> <a class="nav-link" data-bs- ...

One challenge encountered when implementing an onClick effect for individual buttons with React's state management

Just diving into the world of React and web development, coming from a bootcamp background. So forgive me if my questions seem a bit naive. I'm struggling with styling buttons after they're clicked on using React state. Whenever I click on one b ...

The React Testing Library has the capability to recognize when a button is disabled, but it is not able to determine the text associated

Why is it that React Testing Library cannot identify the text of a disabled button, but can determine if the button is disabled or not when using the findByRole query? expect( await screen.findByRole('button', { name: /Generating Configurat ...

Is there a way to modify the state within the render function?

Within my code, I receive an array of paragraphs, each with a corresponding chapter number that I keep track of in my state. Starting with a value of 1, I want readers to begin at the first chapter. However, complications arise when there are paragraphs w ...

Input box featuring various entries (image provided for visual guidance)

Currently, I am in search of a text field with multiple inputs like the one displayed here: https://i.stack.imgur.com/yGwzY.png As depicted in the image, the feature I require is the ability to add new text and save it by pressing enter. Can anyone advis ...

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

React component encountering unexpected prop value

In my project, I have a Modal component and a Form component. The Modal is a functional component, while the Form is a class component responsible for handling form submissions. The Modal component passes all of its props to the Form component. Within Mod ...

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

Replacing Material-UI with SCSS

In my current React project, I am utilizing MUI and Sass. The issue I am facing is that there are numerous scss files filled with !important declarations to override the MUI styles using Sass. To address this issue, I attempted to eliminate the !important ...

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...

A guide to confirm if an object includes an HTML element without compromising safety

When I implement a function that is triggered by a click event: useEffect(() => { document.addEventListener('click', (e) => handleClickOutside(e), true); }); The function itself: const myElement = useRef(null); const handleCli ...

Solving the issue of unnecessary white space when printing from Chrome

Whenever I print from Chrome, there seems to be extra space between lines in the middle of a paragraph! Here is an image showing the difference between print emulation and print preview This excess space is always in the same position on various pages an ...

Alter the typography of the text that has been enhanced by Google

I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...

When a table undergoes a dynamic reload, the formatting for the columns fails to display properly

After fetching image metadata from an API call, a table is dynamically generated on page load. Subsequently, when new images are uploaded, the function responsible for building the table is called again to include this new data. However, despite the CSS st ...

Style the "focus" pseudo-class of an input element using Vue programmatically

Currently, I have been utilizing event listeners to manipulate the :focus pseudo-class of an input element: const element = document.getElementById("myElementID"); element.addEventListener("focus", (e) => { e.target.style.borderCo ...

Place three images in the center of a div container

Recently, I've been working on some HTML code that utilizes the Angular Material library: <div layout="row" layout-wrap style="background: yellow; "> <div ng-repeat="pro in Products" > <md-card class="cardProduct" > ...

Styling elements with CSS

I've been attempting to align a button to the right of another button. The example above illustrates what I'm trying to achieve. I used Bootstrap to build it, which has a useful navbar feature for layout. However, despite my efforts to use right ...

Morris.js tutorial: Enhancing bar charts with data labels

I have this: https://i.sstatic.net/GXjur.png But I want this instead: https://i.sstatic.net/spcS2.png Does morris.js support this feature? If not, what would be the most effective method to implement it? ...

Gradual disappearance of preloader as the page loads

I'm facing an issue with setting a gif as a website preloader. Despite trying different JavaScript solutions, the preloader remains visible even after the page has finished loading. $(window).on("load", function() { $(".loading").fadeOut("slow"); ...