Flex / Grid Playground

Flex / Grid Playground is an interactive CSS editor for exploring responsive CSS Grid and Flexbox layouts. It displays gradient squares and lets you change layout rules in real time, with the generated CSS available to copy.

Features

• Toggle between CSS Grid and CSS Flexbox.
• Adjust Grid columns, gap, and alignment.
• Adjust Flexbox direction, gap, and wrapping.
• Change the number and size of displayed squares.
• View live settings and generated CSS.
• Copy the generated CSS to the clipboard.
• Reset all options to their defaults.
• Responsive layout for desktop and mobile screens.

How to use

1. Open index.html in a browser, or serve the folder with any static web server.
2. Choose CSS Grid or CSS Flexbox in the control panel.
3. Change the available options to see the nine gradient squares update immediately.
4. Use Display options to choose how many squares appear and how large they are.
5. Review the generated CSS in the Current CSS panel.
6. Select Copy CSS to copy the current snippet.
7. Select Reset options to restore the default layout.

Project structure

flexgrid/
|-- css/
|   `-- styles.css
|-- js/
|   `-- app.js
|-- favicon.svg
|-- index.html
`-- README.md

Credits

Created by Damion Wilson for CodeBox LLC.

• LinkedIn: Damion Wilson
• Bluesky: @dwilsoncoder
• GitHub: cssflexgrid