Is it possible to use 1D array to render 2D grid in React?

Question

I wanted to render an array into a 2d grid (3 rows and 3 columns). The array itself is just a one-dimensional array.

const array = Array.from({ length: 9 }, (_, i) => i + 1);

I have a React component that renders it into a list of div

export default function App() {
  return (
    <div className="App">
      <div className="grid">
        {array.map((cell) => (
          <div className="cell">{cell}</div>
        ))}
      </div>
    </div>
  );
}

Now the cells are just stack on each other which is expected. I wonder if there is a way to make it a 3 x 3 grid without having to change the existing DOM structure by only adding styles?

maybe this is what you want? https://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript — mazoula, Nov 20 '22 at 05:33
use grid layouts, https://www.w3schools.com/css/tryit.asp?filename=trycss_grid — Xiduzo, Nov 26 '22 at 12:24

Yanick Rochon · Answer 1 · 2022-11-20T05:45:49.440

Yes, this is about CSS Grid. The following is a plain HTML/CSS example, but it can easily be converted to React.

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.cell {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>
<h1>Grid Elements</h1>

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>  
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>  
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>  
</div>

</body>
</html>

Oh seems it's deep night in your side now – flyingfox Nov 20 '22 at 05:54 — flyingfox, Nov 20 '22 at 05:54
haha, yes, but I'm more productive at night :) – Yanick Rochon Nov 20 '22 at 05:55 — Yanick Rochon, Nov 20 '22 at 05:55

score 0 · Answer 2 · answered Nov 20 '22 at 05:59

  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196f3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

import "./styles.css";
const array = Array.from({ length: 9 }, (_, i) => i + 1);

export default function App() {
  return (
    <div className="App">
      <div className="grid-container">
        {array.map((cell) => (
          <div className="grid-item">{cell}</div>
        ))}
      </div>
    </div>
  );
}

https://codesandbox.io/s/busy-panka-mf4rhv?file=/src/App.js:0-314

score 0 · Answer 3 · answered Nov 20 '22 at 06:16

Here is a quick example that uses CSS grid to style the layout from array.map().

It can run from the snippet:

const array = Array.from({ length: 9 }, (_, i) => i + 1);

const App = () =>
<div className="App">
  <div className="grid">
    {array.map((cell, index) => (
    <div className="cell" key={cell}>{cell}</div>
    ))}
  </div>
</div>
;

ReactDOM.render(<App />, document.querySelector('#root'));

.grid {
 display: grid;
 grid-template-columns: repeat(3, 50px);
 grid-template-rows: repeat(3, 50px);
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  background-color: pink;
}

.cell:nth-child(even) {
  color: #fff;
  background-color: hotpink;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Is it possible to use 1D array to render 2D grid in React?

3 Answers3