Gridiola is a powerful grid layout generator tool built with React and Tailwind CSS. It allows you to easily generate grid layouts by specifying the number of rows, number of columns, row height, column width, and row gap.
- Generate grid layouts with custom properties.
- Preview the generated grid layout in real-time.
- Copy the generated CSS code to the clipboard.
You can check out the live demo of Gridiola here.
To get started with Gridiola on your local machine, follow these steps:
- Clone the repository:
git clone https://github.com/Frenziecodes/gridiola.git - Navigate to the project directory:
cd gridiola - Install the dependencies:
npm install - Start the development server:
npm run dev - Open your browser and visit
http://localhost:5173/to see Gridiola in action.
- Adjust the input fields for the number of rows, number of columns, row height, column width, and row gap.
- Click the "Generate Grid" button to generate the grid layout preview.
- Click the "Generate Code" button to view the generated CSS code in a modal.
- Click the "Copy" button in the modal to copy the CSS code to the clipboard.
Contributions are welcome! If you find any bugs, have feature requests, or want to contribute to the project, please refer to the CONTRIBUTING.md file for more information.
This project is licensed under the MIT License.
If you have any questions or feedback, please feel free to contact the project maintainers:
- Frenziecodes - [email protected]
We appreciate your interest in Gridiola!