Layoutit grid is a CSS Grid layout generator

Overview

Layoutit Grid

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 🎯

This 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.

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

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

  • Vue 3 Vue.js - The Progressive JavaScript Framework.
  • Vueuse Collection of essential Vue Composition Utilities
  • Vite Next generation frontend tooling. It's fast!
  • vite-plugin-pwa Zero-config PWA for Vite
  • vite-plugin-components On demand components auto importing for Vite

Mentions



Creators

Layoutit grid is crafted with love by Leniolabs and a growing community of contributors. We build digital experiences with your ideas. Get in touch!

Comments
  • Uncaught ReferenceError: ref is not defined

    Uncaught ReferenceError: ref is not defined

    I get this error when I try to load the component

    import { createApp } from 'vue'
    import LayoutEditor from 'layoutit-grid/src/components/LayoutEditor'
    // ...
    createApp(LayoutEditor).mount("#apppp")
    

    image

    Seems like the function is in vue/compat but my browser cannot resolve it.

    I am using Laravel mix for the webpack configuration.

    I tried to resovle vue to vue-compat, but not sure if that did work correctly:

    mix.webpackConfig({
        resolve: {
            alias: {
                vue: '@vue/compat'
            }
        }
    });
    
    opened by RdeWilde 9
  • Add keyboard shortcuts for main features (undo, redo, delete area)

    Add keyboard shortcuts for main features (undo, redo, delete area)

    We should add keyboard shortcuts for the main actions: Cmd+z : undo Cmd+y | Cmd+Shift+z : redo Cmd+s : Get Permalink Cmd+q : reset

    When selecting grid cells for a new area (AreaSelection.vue) Esc: closes selection, or cancels area edition

    When area is active delete : removes the area (or the subgrid if there is one) c: add column (in the future it can mean, add it where I have the mouse) r: add row g: add subgrid in the area

    enhancement good first issue 
    opened by patak-dev 9
  • feat: add service worker

    feat: add service worker

    @patak-js

    The service worker is not registered on development (vite-plugin-pwa will omit it, just registers a dummy virtual module that does nothing), so you don't need to worry about it. If you want to test the dist, run npm run build-serve.

    This PR also includes (see commits for all changes I made):

    • exclude intellij/webstorm stuff from .gitignore
    • exclude public/manifest.json from index.html: manifest will be configured from manifest entry on VitePWA plugin on vite.config.ts
    • manifest.json should be removed: I just keep it if you want to change something on new configuration (just compare both to see the changes)
    • added public/icons/icon-36x36.png to be used on src/components/props/BrandLogo.vue: the width attribute was wrong (widht) and since its size is changed from css style to 1em I reduce the size of the asset).
    • added public/icons/android-icon-512x512.png for any maskable on pwa manifest
    • the service worker is registered on src/App.vue on onMounted hook: this can be changed to use dynamic import inside the onMounted hook, but lighthouse complains to add a preload for the pwa virtual module.
    • added build-serve on package.json scripts: one command to test the build
    opened by userquin 6
  • I can not scroll the grid section to view the third row when I expanded 1200px for a grid row

    I can not scroll the grid section to view the third row when I expanded 1200px for a grid row

    Hello,

    1. Select for 1fr for first grid row.
    2. Select for 1200px for second grid row.
    3. Select for 300px for third row.
    4. Try to scroll the grid section to view the third grid row.
    bug 
    opened by gusbemacbe 6
  • Allow moving/extending grid areas

    Allow moving/extending grid areas

    Hello, first of all, thank you for this wonderful tool !

    The only thing I am missing is the ability to move or extend already defined grid areas.

    When one grid area is saved, there is no way (at least I found none) to make it start at another row/column, or to make it span a different number of rows/columns.

    Thanks in advance for taking this into consideration

    opened by FrankySnow 4
  • [2] Add button to create codesandbox

    [2] Add button to create codesandbox

    Final result

    I have created the button to create a codesandbox next to the button to create a codepen, and I moved the button 'Get permalink' under these two buttons.

    I had to install lz-string lib to create the hash to create the codesandbox. Originally I tried to install codesanbox lib to use the function getParameters but Vite could not compress correctly this lib and thrown an error. So I had to replicate this function (getParameters) into our code. the same that is using here: import { getParameters } from "codesandbox-import-utils/lib/api/define";

    opened by edades 4
  • Improve mobile UX to open and close sidebars

    Improve mobile UX to open and close sidebars

    There should be at least two buttons, one for the Props sidebar and one for the Code and clear hints of how they work. Maybe we need a small header in mobile instead of showing the grid covering the whole screen.

    enhancement 
    opened by patak-dev 4
  • refactor: Switch scss for postcss

    refactor: Switch scss for postcss

    What does this PR do?

    Switch SCSS for PostCSS with the nested plugin.

    What's the reason for this PR?

    This PR solves #67. Since the only use of SCSS is for nesting CSS rules, we can replace it with PostCSS using the postcss-nested plugin.

    How does it do it?

    Since vite supports PostCSS out of the box, the only change needed is to add the postcss-nesting plugin and replace the lang="scss" in the styles tags for lang="postcss"

    opened by Dgiulian 3
  • feat: add keyboard shortcuts for main features

    feat: add keyboard shortcuts for main features

    Added the following keyboard shortcuts:

    • cmd/ctrl + z: redo
    • cmd/ctrl + y: undo
    • cmd/ctrl + shift + z: undo
    • cmd/ctrl + shift + r: reset grid.
    • Delete/Backspace: delete the area seleted.
    • Esc: cancels selection, or deselect area to edition.
    • c: add a new column to the grid (even to subgrids).
    • r: add a new row to the grid (even to subgrids).
    • g: add subgrid to the selected area.

    solve: #37

    opened by erickgomez28 3
  • Selecting

    Selecting "auto" leads to wrong css

    Hello, Selecting "auto" as the value of a column/row generates incorrect css: 1auto instead of auto.

    Steps to reproduce:

    Generated css:

    .grid-container {
      display: grid;
      grid-template-columns: 1auto 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 0px 0px;
      grid-template-areas:
        ". . . ."
        ". . . ."
        ". . . .";
    }
    

    Expected css:

    .grid-container {
      display: grid;
      grid-template-columns: auto 1fr 1fr 1fr; // difference is here
      grid-template-rows: 1fr 1fr 1fr;
      gap: 0px 0px;
      grid-template-areas:
        ". . . ."
        ". . . ."
        ". . . .";
    }
    
    opened by amaury-hanser 3
  • Support exporting to CodeSandbox

    Support exporting to CodeSandbox

    We can use CodeSandbox Define API to create vanilla sandboxes:

    https://codesandbox.io/docs/api#define-api

    I think that people will prefer one of the options (Codepen, CodeSanbox, later other options?), and only use that one when using the app. There should be a way to select this preference and save it in local storage. Only one Export button will be shown in this way avoiding cluttering the UI

    enhancement good first issue Hacktoberfest 
    opened by patak-dev 3
  • Doesn't work on Firefox ESR (M1 Mac) for me

    Doesn't work on Firefox ESR (M1 Mac) for me

    Tried in an incognito window as well. With default tracking protection settings applied.

    Versions: Firefox ESR: 78.14.0esr (64-bit) MacOS: BigSur 11.3.1 (20E241)

    Screenshot_2021-09-18 Layoutit Grid — CSS Grids layouts made easy

    opened by architchandra 0
  • Improve Grid Placement pickers

    Improve Grid Placement pickers

    See https://github.com/Leniolabs/layoutit-grid/issues/91#issuecomment-891108259

    • change color on hover to darker blue once an item is selected, so the user knows it can click on the selected one to go back to initial
    • don't close the options when going back to initial. The options should collapse by clicking on the title (collapsing with local state).
    opened by patak-dev 0
  • Generate `grid-template` syntax for better readability

    Generate `grid-template` syntax for better readability

    At the moment it produces code like this:

    .grid {
      display: grid;
      grid-template-columns: 1fr 2fr 3fr;
      grid-template-rows: 100px 200px 300px;
      grid-template-areas:
        "a a b"
        "a a c"
        "d d e";
    }
    

    However it is much easier to read if the code is formatted like this in grid-template:

    .grid {
      display: grid;
      grid-template:
        "a   a   b" 100px
        "a   a   c" 200px
        "d   d   e" 300px /
         1fr 2fr 3fr;
    }
    

    Note the additional spaces that you need to add to line up the column widths with the start of the area name.

    Also, if a row is auto it doesn’t need a row height specified.

    .grid {
      display: grid;
      grid-template:
        "sidebar-L main   sidebar-R" 
        "sidebar-L footer sidebar-R" /
         1fr       4fr    1fr;
    }
    

    By moving all the values into the 1 rule you can easily see what value is associated with what column/row as long as the formatting is done right. Making sure the column values line up with the start of all the column names is vital for readability.

    opened by Dan503 5
  • Import existing grid

    Import existing grid

    Allow to import existing html/css into the grid, this way can modify a previous created(with the app or manually) grid.

    An optional awesome feature can be maintain the not grid related props (like background, padding) of imported css and attrs (id, class, data-...) in html.

    enhancement 
    opened by Nisgrak 0
  • feat: add keyboard shortcuts to add rows and columns on grid cell hover

    feat: add keyboard shortcuts to add rows and columns on grid cell hover

    In addition to add rows and columns on current area with keys c and r:

    • Add row on current area under grid cell hovered + r
    • Add column on current area to the right of grid cell hovered + c

    The columns and rows added will move inner children to the right/bottom if needed.

    opened by leandroercoli 0
  • Add support for multiple device and responsive design

    Add support for multiple device and responsive design

    Hi,

    A feature request for an already great tool: The option to design for multiple device sizes and orientations at once and then the choice to export all the needed responsive styles.

    enhancement 
    opened by MikaelPorttila 1
Owner
Leniolabs_
Scale your Front-end development with our unique approach
Leniolabs_
Vue Layout System is a pack of Vue components that solve daily layout problems.

A pack of Vue components that solve daily layout problems

boyin.lee 31 Aug 20, 2022
Vue Layout System is a pack of Vue components that solve daily layout problems.

Vue Layout System is a pack of Vue components that solve daily layout problems.

boyin.lee 6 May 30, 2021
🌊 A horizontal sorting waterfall layout component for Vue.js, realized by flex layout

vue-flex-waterfall A horizontal sorting waterfall layout component for Vue.js, realized by flex layout. Refer to CSS masonry with flexbox, :nth-child(

神代綺凛 27 Jul 13, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Oct 3, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 139 Aug 3, 2022
grid layout,support flex

simple-grid a simple grid layout(Vue Component) Installation use npm $ npm i simple-xgrid --save import Grid from 'simple-xgrid' import 'simple-xgrid

zhoulin 26 May 30, 2022
Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use <

Shogo Sensui 43 Jun 30, 2022
Vue Repsonsive Grid Layout

VueResponsiveGridLayout 1.2.0 Responsive draggable and resizable grid layout for VueJS. Its responsiveness is based on breakpoints (similar to Bootstr

lukerem 82 Jan 18, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Sep 29, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 138 Sep 30, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

ibrahem kamal 0 Aug 26, 2020
Vue.js Masonry layout component powered by CSS, dependancy free

A new masonry component powered by CSS to be fast loading and free of jQuery or other dependencies. Build specifically for Vue.js projects. ?? Why? Ex

Paul Collett 433 Sep 18, 2022
Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.

vue-colrow Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. Document. It also has a React

Xinxin 7 Sep 13, 2021
Vue.js Masonry layout component powered by CSS, dependancy free

A new masonry component powered by CSS to be fast loading and free of jQuery or other dependencies. Build specifically for Vue.js projects. ?? Why? Ex

Paul Collett 433 Sep 18, 2022
vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps.

| vue-products-grid vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different op

Antonio 4 Feb 14, 2020
Virtual Scrolling Grid made for VueJS based on CSS grids.

Vue Virtual Grid Virtual Scrolling Grid made for VueJS based on CSS grids. NPM Package | Demo Website Render any Vue Component (images, iframes, conte

Corentin Mors 42 Oct 4, 2022
🧮 Generate basic CSS Grid code to make dynamic layouts!

CSS Grid Generator Site: https://cssgrid-generator.netlify.com/ This project is a way for people to use CSS Grid features quickly to create dynamic la

Sarah Drasner 4.3k Sep 25, 2022
A waterfall layout component for Vue.js

vue-waterfall A waterfall layout component for Vue.js . Branch 0.x (version 0.x.x) is compatible with Vue 1 . Demo Vertical line Horizontal line Verti

MopTym 2k Sep 26, 2022
Default layout or create custom layouts for the pages of your Vue.js SPA (Multiple layouts)

vue-extend-layout A simple extend the default layout or create custom layouts for your SPA Vue.js, using dynamic import component. For vue-extend-layo

Alan Ktquez 134 Apr 22, 2022