flexgrid-tool

A css flexbox and grid tool featuring a grid of colored blocks, a switch to toggle between grid/flexbox modes, for each mode there is a form with options to edit all the css properties for that mode (eg 'gap' 'justify-content,' 'align-items,' etc...) and finally a toolbar with actions to add/remove blocks and edit their base properties like size, border, etc.

Collaborate with GPT Engineer

This is a gptengineer.app-synced repository 🌟🤖

Changes made via gptengineer.app will be committed to this repo.

If you clone this repo and push changes, you will have them reflected in the GPT Engineer UI.

Tech stack

This project is built with React and Chakra UI.

• Vite
• React
• Chakra UI

Setup

git clone https://github.com/GPT-Engineer-App/flexgrid-tool.git
cd flexgrid-tool
npm i

npm run dev

This will run a dev server with auto reloading and an instant preview.

Requirements

• Node.js & npm - install with nvm