Moving a Square with CSS Grid and Minimal JavaScript

In a recent technical interview, I was tasked with a problem where a square had to be moved within a grid using buttons. The solution I initially thought of required more complex logic and JavaScript, but I realized I could use CSS Grid to handle most of the heavy lifting. In this post, I'll explain how I used grid properties to solve the problem with minimal JavaScript.

Example

The Problem

I had to move a square within a grid with the help of four buttons: up, down, left, and right. The grid and buttons are defined as follows:

.grid {
  display: grid;
  grid-template-columns: repeat(11, 20px);
  grid-template-rows: repeat(17, 20px);
}

.square {
  grid-column-start: 6;
  grid-row-start: 9;
  background-color: red;
}

.btn {
  display: grid;
  width: 100%;
  height: 100%;
}

.btn-up {
  grid-column-start: 2;
  grid-column-end: 11;
}

.btn-down {
  grid-column-start: 2;
  grid-column-end: 11;
  grid-row-start: 17;
}

.btn-right {
  grid-column-start: 11;
  grid-row-end: 17;
  grid-row-start: 2;
}

.btn-left {
  grid-column-start: 1;
  grid-row-end: 17;
  grid-row-start: 2;
}

The JavaScript Solution with React

Instead of manually moving the square's position in the DOM, I used CSS grid properties combined with React's state to determine the square's position on the grid.

Here's the JavaScript code:

import React, { useState } from "react";

const Board = () => {
  const [axisX, setAxisX] = useState(6);
  const [axisY, setAxisY] = useState(9);

  const handleMoveSquare = (direction) => {
    switch (direction) {
      case "up":
        if (axisY > 2) setAxisY(prevY => prevY - 1);
        break;
      case "down":
        if (axisY < 16) setAxisY(prevY => prevY + 1);
        break;
      case "right":
        if (axisX < 10) setAxisX(prevX => prevX + 1);
        break;
      default:
        if (axisX > 2) setAxisX(prevX => prevX - 1);
        break;
    }
  };

  return (
    <div className="grid">
      <div className="btn btn-up">
        <button onClick={() => handleMoveSquare("up")} />
      </div>
      {/* ...other buttons... */}
      <div className="square" style={{ gridColumnStart: axisX, gridRowStart: axisY }}></div>
    </div>
  );
};

Demo

Conclusion

CSS Grid properties combined with React's state management provide a powerful way to create dynamic interfaces without much manipulation of the DOM. By setting the grid properties dynamically based on React's state, we can create fluid interfaces that react to user interactions.

Would love to hear your thoughts on other creative uses of CSS Grid!