[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8864":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":35,"discoverSource":36},8864,"layoutit-grid","LayoutitStudio\u002Flayoutit-grid","LayoutitStudio","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.","https:\u002F\u002Fgrid.layoutit.com",null,"Vue",1746,186,23,16,0,1,2,3,58.02,"MIT License",false,"main",true,[26,27,28,29,30,31],"css","css-grid","generator","vite","vue","vue3","2026-06-12 04:00:41","# Layoutit Grid\n\n_CSS Grids layouts made easy!_\n\n_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.\n\n**Read about the process of [Open Sourcing Layoutit Grid, and why we are using Vue 3 and Vite](https:\u002F\u002Fleniolabs.com\u002Fsoftware\u002Fdevelopment\u002F2020\u002F09\u002F23\u002Fopen-source-layoutit.html?utm_source=layoutit&utm_medium=banner&utm_campaign=leniolabs&utm_content=grid_github)** :heart:\n\n## Use the tool\n\nGo to https:\u002F\u002Fgrid.layoutit.com\u002F and start playing :dart:\n\n\u003Cimg width=\"398\" src=\".\u002Fassets\u002Flayoutit-grid-showcase-v2.gif\">\n\nThis App is not currently intended to be used as a library, but may in the future. The package in npm is just a placeholder to help discovering the github repository at this point.\n\n## Why we built a Generator\n\nGenerators 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.\n\nRead more about [learning CSS Grid visually with a generator here](https:\u002F\u002Fcss-tricks.com\u002Flayoutit-grid-learning-css-grid-visually-with-a-generator\u002F)\n\n## Run it locally\n\nThese instructions will get you a copy of the project up and running on your local machine for development\n\n### Clone the repo\n\nUse ssh\n\n```bash\ngit clone git@github.com:Leniolabs\u002Flayoutit-grid.git\n```\n\nOr https\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fleniolabs\u002Flayoutit-grid.git\n```\n### Run it\n1. Install `pnpm` (https:\u002F\u002Fpnpm.io\u002Finstallation)\n2. In the repo folder run\n```bash\npnpm install\npnpm start\n```\n\nYour dev server will start and be running at\n\n```bash\n  > Local:    http:\u002F\u002Flocalhost:3000\u002F\n```\n\n#### Commands\n\n| Command         | Description                   |\n| --------------- | ----------------------------- |\n| `pnpm install`   | Install the dependencies      |\n| `pnpm start`     | Run the project (in dev mode) |\n| `pnpm run build` | Build for deployment          |\n\n## Contributing\n\n[Ideas](https:\u002F\u002Fgithub.com\u002Fleniolabs\u002Flayoutit-grid\u002Fissues\u002Fnew), pull requests and bug reports are welcome.\n\n## Libs and Tools used\n\n- [Vue 3](https:\u002F\u002Fv3.vuejs.org) Vue.js - The Progressive JavaScript Framework.\n- [Vueuse](https:\u002F\u002Fvueuse.js.org\u002F) Collection of essential Vue Composition Utilities\n- [Vite](https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite) Next generation frontend tooling. It's fast!\n- [vite-plugin-pwa](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fvite-plugin-pwa) Zero-config PWA for Vite\n- [vite-plugin-components](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fvite-plugin-components) On demand components auto importing for Vite\n\n## Mentions\n\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Faddyosmani\u002Fstatus\u002F1222104530038296578\">\u003Cimg width=\"398\" src=\".\u002Fassets\u002Flayoutit-grid-addyosmani.PNG\">\u003C\u002Fa>\n\u003Cbr>\n\u003Cbr>\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Frob_dodson\u002Fstatus\u002F1010303563514310656\">\u003Cimg width=\"398\" src=\".\u002Fassets\u002Flayoutit-grid-rob_dodson.PNG\">\u003C\u002Fa>\n\n## Creators\n\nLayoutit grid is crafted with love by [Leniolabs](https:\u002F\u002Fwww.leniolabs.com\u002Fservices\u002Fteam-augmentation\u002F?utm_source=layoutit&utm_medium=banner&utm_campaign=leniolabs&utm_content=grid_github) and a growing community of contributors. We build digital experiences with your ideas. [Get in touch!](https:\u002F\u002Fwww.leniolabs.com\u002Fservices\u002Fteam-augmentation\u002F?utm_source=layoutit&utm_medium=banner&utm_campaign=leniolabs&utm_content=grid_github)","Layoutit Grid 是一个CSS Grid布局生成器，帮助用户快速绘制网页布局并通过简洁的编辑器获取HTML和CSS代码以启动新项目。其核心功能包括直观的拖拽式布局设计界面、实时预览以及一键生成高质量的前端代码。基于Vue 3框架开发，并利用Vite等现代前端工具提升开发效率与用户体验。适合前端开发者在学习CSS Grid布局时使用，也适用于需要快速原型设计或希望提高编码效率的专业人士。","2026-06-11 03:20:04","top_language"]