Skip to content

obedparla/visual-grid-builder

Repository files navigation

Visual Grid builder

Visual Grid Builder

I created this project to make it easy to design complex CSS Grid layouts. It allows you to aww items and to design the grid by dragging or resizing them. You can then get generated code to create the grid on your own project.

My motivation behind this tool is to create the best, most intuitive way to use CSS grid, without having to understand the complicated underlying CSS specification.

CSS grid is capable of a lot, and my goal for this project is to have parity with what it's possible to do while writing pure CSS. Think of it as a UI abstraction layer on top of the CSS grid specification.

If you want to learn more about CSS grid, the CSS Grid Guide by CSS-Tricks is fantastic.

This project is open to contributions!

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build