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.
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.
This project is built with React and Chakra UI.
- Vite
- React
- Chakra UI
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.
- Node.js & npm - install with nvm