JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Example with Background Image</title>
</head>
<body>
  <div style="
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 600px; /* Adjust to match the width of the background image */
    height: 400px; /* Adjust to match the height of the background image */
    background-image: url('https://via.placeholder.com/600x400'); /* Replace with your background image URL */
    background-size: cover;
    background-position: center;
  ">
    <div class="inner-div" style="
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f00;
      color: #fff;
      width: 100px;
      height: 100px;
      grid-column: 2; /* Change these values to position the inner-div */
      grid-row: 2;    /* Change these values to position the inner-div */
      margin: auto;   /* Ensure centering within the cell */
    ">
      Centered Inner Div
    </div>
  </div>

  <script>
    function positionInnerDiv(position) {
      const innerDiv = document.querySelector('.inner-div');
      const gridMap = {
        'TL': { column: 1, row: 1 },
        'TC': { column: 2, row: 1 },
        'TR': { column: 3, row: 1 },
        'LC': { column: 1, row: 2 },
        'CC': { column: 2, row: 2 },
        'RC': { column: 3, row: 2 },
        'BL': { column: 1, row: 3 },
        'BC': { column: 2, row: 3 },
        'BR': { column: 3, row: 3 }
      };

      if (gridMap[position]) {
        const { column, row } = gridMap[position];
        innerDiv.style.gridColumn = column;
        innerDiv.style.gridRow = row;
      } else {
        console.error('Invalid position');
      }
    }

    // Example usage
    positionInnerDiv('TC'); // This will place the inner-div in the center cell
  </script>
</body>
</html>