DEV Community

Cover image for Moving a Square with CSS Grid and Minimal JavaScript
Juan Carlos Valerio Barreto
Juan Carlos Valerio Barreto

Posted on

2

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay