Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



8 Commits

Repository files navigation

CSS Grid Visualizer

Created with React and Bulma

This project is a first attempt at using React.js and Bulma. The goal of this project was to get acquainted with React structure and JSX in a real-life example while creating a useful tool.

This is also the first time I've used Sass in a project.

Project is sort of a running work in progress, although the core functionality is for the most part finished.


  • Fix styling
  • Update colors?
  • Add ‘View Code’ pop out window to show how the code would look for the selected options
  • Add horizontal scrolling
  • Make side bar sticky
  • Dark mode
  • Add the option to add row and column span for a selected item in the main section
  • Don’t remove row and column spans on deselect of item in grid
  • Add a few base templates (3x3, 4x4, etc)
  • Make the ‘Reset’ button actually work
  • Remove grid-rows as it makes no sense
  • Add max-width for the main content container
  • Add tests