'Height and width of a square matrix

I want to represent a matrix where x=y. (3x3, 5x5) in a container with fixed width and height.

My problem I have that I can't square the single cells dynamically. I always have a problem with the height.

My goal is to spread the individual fields over the entire height.

my code:

.playground {
  width:600px;
  height: 600px;
  background: gray;
}
.row {
  display:flex;
  min-height:10%;
}
.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}
<h2>3x3</h2>
<div class="playground bg-img">

  <div class="row">
    <div class="cell " id="a1">1</div>
    <div class="cell " id="a2">2</div>
    <div class="cell " id="a3">3</div>            
  </div>

  <div class="row">
    <div class="cell " id="b1">4</div>
    <div class="cell " id="b2">5</div>
    <div class="cell " id="b3">6</div>
  </div>
  <div class="row">
    <div class="cell " id="c1">7</div>
    <div class="cell " id="c2">8</div>
    <div class="cell " id="c3">9</div>
  </div>

</div>
htmlcssflexbox


Solution 1:[1]

Make your whole container a flex in column direction, set flex: 1 on your rows and cells so they stretch to cover their parent

/* This code is only here for dynamic size testing, it's not actually part of the solution */

window.addEventListener('DOMContentLoaded', e => {

  let size = 3;

  document.querySelector('#size-selector').addEventListener('click', e => {
    size = parseInt(e.target.value);
    updateSize();
  });

  function updateSize() {

    const title = document.querySelector('h2');
    title.innerHTML = `${size}x${size}`;

    const grid = document.querySelector('.playground');

    grid.innerHTML = "";
    for (let i = 0; i < size; i++) {
      const row = makeRow(grid);
      const cells = row.querySelectorAll('.cell');
      for (let j = 0; j < size; j++) {
        cells[j].innerHTML = i * size + j + 1;
      }
    }

  }

  function makeRow(grid) {
    const r = document.createElement('div');
    r.classList.add('row');
    for (let i = 0; i < size; i++) {
      makeCell(r);
    }
    grid.appendChild(r);
    return r;
  }

  function makeCell(row) {
    const c = document.createElement('div');
    c.classList.add('cell');
    row.appendChild(c);
    return c;
  }

});
.playground {
  width: 600px;
  height: 600px;
  background: gray;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1;
  background-color: red;
}

.cell {
  background: green;
  border: 1px solid #ccc;
  flex: 1;
}
<h2>3x3</h2>
<input type="number" value="3" min="1" id="size-selector" style="margin: 1em;" />
<div class="playground bg-img">

  <div class="row">
    <div class="cell " id="a1">1</div>
    <div class="cell " id="a2">2</div>
    <div class="cell " id="a3">3</div>
  </div>

  <div class="row">
    <div class="cell " id="b1">4</div>
    <div class="cell " id="b2">5</div>
    <div class="cell " id="b3">6</div>
  </div>

  <div class="row">
    <div class="cell " id="c1">7</div>
    <div class="cell " id="c2">8</div>
    <div class="cell " id="c3">9</div>
  </div>

</div>

Solution 2:[2]

You can use CSS Grid Layout.

.playground {
  display:grid;
  grid-template-rows: 1fr 1fr 1fr;
  width:800px;
  height: 600px;
  background: gray;
}
.row {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}
<h2>3x3</h2>
<div class="playground bg-img">

  <div class="row">
    <div class="cell " id="a1">1</div>
    <div class="cell " id="a2">2</div>
    <div class="cell " id="a3">3</div>            
  </div>

  <div class="row">
    <div class="cell " id="b1">4</div>
    <div class="cell " id="b2">5</div>
    <div class="cell " id="b3">6</div>
  </div>
  <div class="row">
    <div class="cell " id="c1">7</div>
    <div class="cell " id="c2">8</div>
    <div class="cell " id="c3">9</div>
  </div>

</div>

And can be semplified like this:

.playground {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  
  width:800px;
  height: 600px;
  background: gray;
}

.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}
<div class="playground bg-img">

  <div class="cell " id="a1">1</div>
  <div class="cell " id="a2">2</div>
  <div class="cell " id="a3">3</div>

  <div class="cell " id="b1">4</div>
  <div class="cell " id="b2">5</div>
  <div class="cell " id="b3">6</div>

  <div class="cell " id="c1">7</div>
  <div class="cell " id="c2">8</div>
  <div class="cell " id="c3">9</div>

</div>

Solution 3:[3]

You could force the aspect ratio of each cell to be square.

.playground {
  width:600px;
  height: 600px;
  background: gray;
}
.row {
  display:flex;
  min-height:10%;
}
.cell {
  background: green;
  width:100%;
  aspect-ratio: 1 / 1;
  border:1px solid #ccc;
}
<h2>3x3</h2>
<div class="playground bg-img">

  <div class="row">
    <div class="cell " id="a1">1</div>
    <div class="cell " id="a2">2</div>
    <div class="cell " id="a3">3</div>            
  </div>

  <div class="row">
    <div class="cell " id="b1">4</div>
    <div class="cell " id="b2">5</div>
    <div class="cell " id="b3">6</div>
  </div>
  <div class="row">
    <div class="cell " id="c1">7</div>
    <div class="cell " id="c2">8</div>
    <div class="cell " id="c3">9</div>
  </div>

</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Baro
Solution 3 A Haworth

Related Questions