# layoutit/layoutit-grid

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.

Repository: https://github.com/layoutit/layoutit-grid
Canonical: https://ross.abutalabs.com/products/layoutit-grid
Homepage: https://grid.layoutit.com
Language: Vue
License: MIT
License Family: permissive
Topics: css-grid, css, generator, vue, vite, vue3
Last push: 2022-02-14T15:13:57+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 2210, "days_push": 1661, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1746, forks 184 (observed 2026-08-28T04:05:30.764820+00:00)

## What it is
Layoutit Grid is an interactive web-based CSS Grid layout generator that lets users visually draw page layouts and export the resulting HTML and CSS code. It is built with Vue 3 and Vite and is intended to be used as a hosted tool rather than a library.

## Use cases
- generate css grid layouts visually
- quickstart a web page layout with html and css
- learn css grid interactively
- design web page grid templates
- export grid layout code for a project
- prototype responsive page layouts quickly

## When to choose
- you want to visually design a CSS Grid layout and get ready-to-use HTML/CSS
- you are learning CSS Grid and want immediate visual feedback
- you need a quick starting point for a page layout

## When to avoid
- you need a programmable CSS Grid library to embed in your build pipeline
- you need Flexbox or other layout systems beyond CSS Grid
- you need offline or API-driven layout generation

## Facets
- artifact type: application
- maturity: stable
- function: ui-components, css-framework, developer-tools, frontend-framework
- domain: web-development, web-design, frontend, developer-tools, education
- platform: browser, cross-platform
- tags: css-grid, layout-generator, code-generator, visual-editor, vue3, vite, pwa, no-library-use, web-server, nodejs

## Member repositories
- layoutit/layoutit-grid (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:05:30.764820+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T03:29:12.131322+00:00, confidence not recorded.
  - readme: https://github.com/layoutit/layoutit-grid (fetched 2026-08-28T04:05:30.764820+00:00, sha e0ed8c530bf0)
  - homepage: https://grid.layoutit.com (fetched 2026-08-29T11:07:16.046325+00:00, sha 1d483dfdd99c)
- Data as of 2026-08-30T08:39:29.467469+00:00.