⚡ Overview

Prism Flex & Grid Lab is a hands-on playground for CSS layout. Switch between Flexbox and Grid, change any container property, click individual items to set grow/shrink/basis/order or grid placement, and resize the stage to test responsiveness. The generated code only contains properties that differ from defaults, and can be exported as Tailwind classes.

✨ Features

• Flexbox + Grid modes with every common container property
• Per-item controls — flex-grow/shrink/basis, order, align-self, grid-column/row
• Presets: center anything, navbar, wrap cards, stack, 3-col, auto-fit cards, holy grail
• Resizable stage to test wrapping and responsiveness
• Minimal CSS output (defaults omitted) and Tailwind class export
• State saved locally

📸 Screenshots

🚀 Quick Start

Use it online: https://krishyaa06.github.io/prism-flex-grid/

Run locally:

git clone https://github.com/krishyaa06/prism-flex-grid.git
cd prism-flex-grid
# open index.html in your browser, or serve it:
npx serve .

🛠️ Usage

1. Choose Flexbox or Grid and adjust the container controls.
2. Click an item in the preview to edit its own properties.
3. Drag the stage corner to resize; copy the CSS or Tailwind output.

📁 Project Structure

prism-flex-grid/
├── assets/
│   ├── logo.png
│   └── logo.svg
├── css/
│   ├── app.css
│   └── prism.css
├── js/
│   ├── app.js   # controls and live preview
│   ├── core.js   # CSS / Tailwind generators + presets — tested in Node
│   └── prism.js
├── test/
│   └── core.test.js
├── .gitignore
├── LICENSE
├── README.md
├── index.html
└── package.json

🧪 Tests

npm test

Tests use the built-in node:test runner, so there is nothing to install. CI runs them on Node 20 and 22.

🤝 Contributing

1. Fork the repo and create a branch: git checkout -b feature/my-idea
2. Make your change and add a test in test/
3. Run npm test and open a Pull Request

🔷 Part of Prism Protocol

Prism Flex & Grid Lab is one of the open-source tools built by Prism Protocol, a tech community where young builders learn, ship and compete together.

👤 Author

Soumya Bhandare Founder @ Prism Protocol

📄 License

Released under the MIT License.

If you like this project, consider giving it a ⭐
_{"Build. Create. Compete." · Made with ⚡ by Prism Protocol}