CSS Grids layouts made easy!
Layoutit grid is a CSS Grid layout generator. Quickly design web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.
Read about the process of Open Sourcing Layoutit Grid, and why we are using Vue 3 and Vite
Use the tool
Go to https://grid.layoutit.com/ and start playing
Why we built a Generator
Generators can be a stepping stone when you are learning new concepts. Layoutit Grid helps you experience the power of CSS Grid by materializing your designs in a few clicks along with the code to make it happen. This gives you the early wins that you need to push forward with the learning process. For some of us, generators permanently remain in our toolboxes. Not because we do not know how to craft the layouts by hand, but because having the visual feedback loop help us to quickly convert our ideas into code. So we keep playing with them.
Read more about learning CSS Grid visually with a generator here
Run it locally
These instructions will get you a copy of the project up and running on your local machine for development
Clone the repo
git clone [email protected]:Leniolabs/layoutit-grid.git
git clone https://github.com/leniolabs/layoutit-grid.git
In the repo folder run
npm install npm start
Your dev server will start and be running at
> Local: http://localhost:3000/
||Install the dependencies|
||Run the project (in dev mode)|
||Build for deployment|
Ideas, pull requests and bug reports are welcome.