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.

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 🎯

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

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_
We are XORNET this is a fun little project started by @Geoxor for people who have servers and don’t have shit to do with them
, our goal is to let people use our servers for themselves for cheap!

Information We are XORNET this is a fun little project started by @Geoxor for people who have servers and don’t have shit to do with them
, our goal i

George Tsotsos 12 Nov 29, 2021
Sparks bank App is a simple web application built using Vue js, HTML , CSS and firebase data base using fetch to get or post or delete data

spark-bank ?? Table of Contents About Description Project setup ScreenShots Video Website link Contributors About sparks bank App is a simple web appl

norhan reda 4 Oct 19, 2022
1922 簡訊實聯制 - 生成工具 | 本工具可以讓店家/場所自訂簡訊可修改的部分,並且會生成頁面網址、各種海報樣式和兩個 QR Code 版本 (分別是 "頁面 QR Code" 和 "簡訊 QR Code")。

1922 簡訊實聯制 - 生成工具 本工具可以讓店家/場所自訂簡訊可修改的部分,並且會生成頁面網址、各種海報樣式和兩個 QR Code 版本 (分別是 "頁面 QR Code" 和 "簡訊 QR Code")。 工具網址:https://1922sms.reh.tw/ 頁面網址 可直接給無法掃描 Q

張文相 Wenxiang Zhang (旋風之音 GoneTone) 5 Jun 9, 2022
🚕 Simple automation desktop app to download and organize your receipts from Uber/Lyft. Try out our new Ride Receipts PRO !

Simple automation desktop app to download and organize your receipts from Uber and Lyft. Download To download Ride Receipts or purchase Ride Receipts

Hello Efficiency 138 Nov 21, 2022
This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.

This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.

null 2 May 22, 2021
MetaballDrawTool - Metaball Draw Tool Built With Vue

metaballDrawTool Drag to draw a metaball on the canvas. Usage git clone https://

heu matsumoto 0 Jul 5, 2022
LikhaCMS is a Web App Builder with Built-in UI Building Blocks, Drag and Drop Page Builder, Component Code Editor, Dev and Staging Environment

Web App Builder with Built-in UI Building Blocks, Drag and Drop Page Builder, Component Code Editor, Dev and Staging Environment

null 11 Nov 15, 2022
Web application for organization of foodsaving groups worldwide - frontend code and central location for feature planning. For server-side code, go to https://github.com/yunity/karrot-backend

A web platform to support foodsaving groups worldwide. ?? ?? ?? karrot (Frontend) (Backend) This is the frontend repository, i.e. the browser-side sof

yunity 353 Nov 10, 2022
Flutter ARB is a web editor for creating and editing your .arb files needed for internationalising your Flutter applications.

Flutter ARB Editor Description This is a web editor for .arb files, which are required for internationalizing flutter applications using the official

null 8 Aug 19, 2022
Dev Protocol Website 2.0 🚀 Check our issue tracker for beginner-friendly issues

devprotocol.xyz Dev Protocol Website 2.0 View deployed version · Report a Bug ?? Features Uses modern web technologies Source code has support for wri

WebX DAO 19 Oct 12, 2022
📝📋Survey App is a simple web application built using Vue js, HTML, CSS, and JavaScript.

survey ?? Table of Contents About Description Project setup ScreenShots Contributors About Survey App is a simple web application built using Vue js,

norhan reda 3 Aug 31, 2022
Survey App is a simple web application built using Vue js, HTML, CSS, and JavaScript

?? Table of Contents About website description Project setup Compiles and hot-reloads for development Website link ScreenShots Contributors About Surv

Asmaa Adel 2 Aug 19, 2022
Vue shop App is a simple web application built using Vue js, HTML, CSS, and JavaScript

Vue shop App is a simple web application built using Vue js, HTML, CSS, and JavaScript

norhan reda 2 Oct 6, 2022
A repository to quickly build apps for any platform using web technology

A repository to quickly build apps for any platform using web technology

wellá 2 Apr 8, 2022
Vue Quick Notes - Quickly take notes in your admin panel/dashboard or websites

Vue Quick Notes Quickly take notes in your admin panel/dashboard or websites. Installation npm Use npm to install. npm i vue-quick-notes Usage import

Fazail Alam 2 Apr 27, 2022
Backend Code Generator for Laravel 9, Vue 3 and Tailwindcss 3 using primevue

acacia savannabits/acacia (an improved successor to savannabits/jetstream-inertia-generator) is a Backend Modular Code and CRUD generator for Laravel

Savannabits 30 Nov 3, 2022
Rise of the Dead is a single player RPG that takes place during an apocalypse and the down fall of humanity. Can you restore humanity to conquer back the world?

Rise of the Dead [An apocalyptic single-player idle game.] Game Description A simple text-based RPG during the apocalypse. You are a founder of a smal

Kenzie Noggle 1 Dec 28, 2021
¡Find talent for your next event

A webapp that will help you to find talent to collaborate as speaker in your event, the data is anonymized and this will help you to focus in the tech and not in who is using this tech.

Quique Fdez Guerra 3 May 6, 2022