title: Making a grid of spaced items that pieces together clicked ones
body: <p>I'm working on a React project, and can't seem to figure out how to make items come together in a grid. The starting grid looks like this:
  <a href="https://i.stack.imgur.com/04rJR.png" rel="nofollow noreferrer">It's spaced out</a>.</p>
  <p>When certain items of the grid are clicked, I want all of the selected items to come together if adjacent. Like this: <a href="https://i.stack.imgur.com/Y1ZSK.png" rel="nofollow noreferrer">Which only works when every button in a row has no margin</a>.</p>
  <p>I think that using margins is the right approach, but my current attempt at doing so doesn't work considering how every single item has a margin, and so removing the margin of one does nothing.</p>
  <p>The grid is a 9x9 square of buttons inside of a div. The css looks like this:</p>
  <pre><code>/* this is the div the buttons are in */
  /* in my original code, the size of the grid is customizable. If you make a code example with manually typed divs, just replace the var(--grid-size)*/
  .keenboard {
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: repeat(var(--grid-size), 1fr);
  }
  
  /* these are the buttons */
  .keensquare {
    width: 60px;
    height: 60px;
    border: 1px solid rgb(153, 153, 153);
    background-color: rgb(255,255,255);
    margin: 0px;
    transition: background-color 0.15s;
  }
  </code></pre>
  <p>and currently all the code does is toggle the margin of any square from 0 to 3 when it's clicked.</p>
  <p>Thanks in advance to anyone willing to help!</p>