Layoutit Grid

CSS Grids layouts made easy!

Layoutit grid is a CSS Grid layout generator. Quickly draw down 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 🎯

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

Use ssh

git clone [email protected]:Leniolabs/layoutit-grid.git

Or https

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/

Commands

Command	Description
npm install	Install the dependencies
npm start	Run the project (in dev mode)
npm run build	Build for deployment

Contributing

Ideas, pull requests and bug reports are welcome.

Libs and Tools used

• Vite
• Vue 3
• Prism

Mentions

Creators

Layoutit grid is crafted with love by Leniolabs. We build digital experiences with your ideas. Get in touch!