🧮 Generate basic CSS Grid code to make dynamic layouts!

Overview

CSS Grid Generator

Site: https://cssgrid-generator.netlify.com/

CSS Grid Generator

This project is a way for people to use CSS Grid features quickly to create dynamic layouts.

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

I noticed a lot of people weren't using Grid because they felt it was too complicated and they couldn't understand it. Grid is capable of so much, and this small generator only touches on a fraction of the features. The purpose of this is so people get up and running quickly, and create more interesting layouts.

Once you work with this a bit, I suggest checking out resources by Rachel Andrew, Jen Simmons, and Dave Geddes to dive deeper. There is also a CSS Grid Guide on CSS-Tricks, and a fun little game called Grid Garden to help you learn more!

This project is open to contributions!

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.

Comments
  • Modal a11y improvements

    Modal a11y improvements

    Hi there! Awesome way to introduce folks to css grid. I made some quick improvements to the accessibility of the modal, which can be viewed here: ~https://css-grid-generator-a11y.zackkrida.now.sh/ (sorry I used now hehe 😊).~ (You've got netlify's deployment stuff going on already, might as well review there)

    Should satisfy most of the concerns in #5.

    Changes:

    • [x] Modal close on 'esc' keypress and on click outside of modal
    • [x] Autofocus "Copy code" button when modal is opened
    • [x] ARIA roles and labels added to modal
    • [x] Switch alert on code copy success to text change within the button, with aria-live attribute
    • [x] Focus trap when modal is open (not sure of best way to implement w/o adding a 3rd party lib)

    I'd love to have a screenreader user assess these changes, although everything should be pretty straightforward. Hope this helps!

    opened by zackkrida 12
  • Transparent Div after

    Transparent Div after ".div21"

    When you click to create a new div, you will get a colorful div when you have more than 21 div it will be transparent with no colors see this : image

    i think the problem is here: https://github.com/sdras/cssgridgenerator/blob/f4ec8a4b2cd72c3c28433d68905a9fa434f1208c/src/components/AppGrid.vue#L171

    What do you think ?

    opened by Ademking 5
  • Error while building the application on a windows machine

    Error while building the application on a windows machine

    Hi,

    After running npm install, I ran npm run serve and getting this error in my terminal.Also, I am running this application on windows 10 machine -

    cssgridgenerator-master\node_modules\open\index.js:11 const wslToWindowsPath = async path => { ^^^^ SyntaxError: Unexpected identifier at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (C:\Users\vn50afl\Desktop\cssgridgenerator-master\cssgridgenerator-master\[email protected]\cli-shared-utils\lib\openBrowser.js:9:14) at Module._compile (module.js:570:32)

    opened by agarwalprashant 5
  • Add css repeat() support

    Add css repeat() support

    First, thanks for creating this website. It's very nice to have this utility and I'll probably use it a lot when creating layouts.

    Motivation

    When using css grid, one of the css features that can be used is the function repeat() when you have lots of columns or rows.

    Adding support to this function would help the developer know the number of columns / rows only by first looking at the repeat first argument (the number of repetitions).

    For example:

    /* I'm CoNfUsEd(???) How many columns are there??? */
    .selector {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 100px;
    }
    

    would be translated to

    /* YEEAH now I get it! there're 6 fraction columns + 1 100px column */
    .selector {
      grid-template-columns: repeat(6, 1fr) 100px;
    }
    

    What is included in this PR?

    This PR adds two functions:

    • groupRepeatedUnits (templateArray = ['1fr']) this function iterates over the template array and creates a matrix in a format like [['1fr', '1fr'], ['100px']] when passed ['1fr', '1fr', '100px'] as argument.

    • createRepetition (groups, maxRepetition = 1) this function expects a data model like the one groupRepeatedUnits returned and maps and joins it in a final format like 'repeat(2, '1fr') 100px'. Note: it expects a second arg called maxRepetition, which controls the max number of repetitions before adding a repeat() in the array. If you think we should only add repeat() for 2+ repetitions just increase this argument default value.

    I chose the 2-functions implementation over a simple function that creates only one array in favor of cleaner code. This because a single function would add complexity and nested ifs. If you know a better implementation, please share with me.

    opened by trickstival 4
  • Nested Grids?

    Nested Grids?

    This is really a feature request. I love the simplicity of your tool, for quick and dirty grid configuration I love it! It has some quirks, most of which I think already have issues, but overall it is really nice how simple and easy it is to use.

    I am wondering, though...could this be extended, without losing the simple design...to support nested grid layouts?

    enhancement 
    opened by jrista 4
  • Allow

    Allow "auto" values for rows/columns

    It would be nice to support auto, as well as max-content and min-content for row and column sizes.

    I imagine adding tests for them here would work: https://github.com/sdras/cssgridgenerator/blob/54e99705166af5a94f79630561eadde01dbd8666/src/components/AppGrid.vue#L89-L96

    But I'm not sure how to visualise that on the grid (since the rows/columns have no content to size by). Maybe just default to a ~2rem height/width? We can probably assume the user knows what they're doing if they've typed min-content in.

    I've never written any Vue before but happy to learn to try and PR if you think this would be worthwhile.

    PR in progress 
    opened by oliverjam 4
  • make it possible to undo/unselect divs?

    make it possible to undo/unselect divs?

    accidental clicks can cause creation of extra divs we didnt mean to make.

    the simple form of this is a "undo" mechanism. probably a vuex thing? idk

    the bigger form of this is a click/touch mechanism or logic to know we want to delete stuff

    the "galaxy brain" form of this is direct manipulation of the generated code to delete/edit stuff directly, and see the result visualized. altho arguably you could already do that in browser css tools 🤷🏼‍♂️

    good first issue 
    opened by sw-yx 4
  • Add previewarea when creating a new child

    Add previewarea when creating a new child

    this is my first time working with vue, had a lot of fun with it! this builds on top of the existing placeChild function by adding another event type: startend -> startendhover.

    Screen Recording 2019-05-28 at 10 41 PM

    opened by zhammer 3
  • Buttons to undo last div and clear all divs

    Buttons to undo last div and clear all divs

    Simple buttons to undo last div and clear all divs you drew You could refresh the page, but then you lose any grid changes you made Definitely open to a different label and/or layout

    image

    image

    opened by kavisherlock 3
  • Set browserslist correctly

    Set browserslist correctly

    A correct browserslist must be defined in order to let PostCSS (already running with Vue CLI) prefix the code. I have a PR ready, i can suggest browsers version where the grid module is natively supported:

    [
      "last 2 Chrome versions",
      "last 2 Firefox versions",
      "last 2 Safari versions",
      "last 2 Edge versions"
    ]
    

    Then remove prefixed code around the repo.

    PR in progress 
    opened by equinusocio 3
  • Shareable states / Add query param support for URL sharing

    Shareable states / Add query param support for URL sharing

    This is related to #16. Created this pr because the issue is idled since June.

    Feature

    Enable to share the store state in url query string.

    Once pr preview of netlifly is deployed theese examples bellow should be working:

    How to use

    Add the desired state as a query parameter /?columns=3&colArr=[{"unit":"1fr"},{"unit":"1fr"},{"unit":"1fr"}]

    Notes

    • rows, columns, colArr and rowArr should be always setted
    • Just used window.location.search and URLSearchParams. Maybe considering to add vue-router to the project?
    • Did not created a share action to the user. I could add this if you want.
    opened by yubathom 2
  • Bump @hapi/hoek and @hapi/joi

    Bump @hapi/hoek and @hapi/joi

    Bumps @hapi/hoek and @hapi/joi. These dependencies needed to be updated together. Updates @hapi/hoek from 6.2.4 to 8.5.1

    Commits

    Updates @hapi/joi from 15.0.3 to 15.1.1

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump terser from 4.0.0 to 4.8.1

    Bump terser from 4.0.0 to 4.8.1

    Bumps terser from 4.0.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump shell-quote from 1.6.1 to 1.7.3

    Bump shell-quote from 1.6.1 to 1.7.3

    Bumps shell-quote from 1.6.1 to 1.7.3.

    Release notes

    Sourced from shell-quote's releases.

    v1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    v1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    v1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    v1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    v1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)

    1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump eventsource from 1.0.7 to 1.1.1

    Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump url-parse from 1.4.7 to 1.5.10

    Bump url-parse from 1.4.7 to 1.5.10

    Bumps url-parse from 1.4.7 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Sarah Drasner
comprehension over configuration
Sarah Drasner
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
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
Layoutit grid is a CSS Grid layout generator

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.

Leniolabs_ 1.3k Oct 4, 2022
Popular layouts and patterns made with Tailwind CSS

Popular layouts and patterns made with Tailwind CSS

LaLoka Labs 83 Aug 22, 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
Vue-grid-layout is a grid layout system, like Gridster, for Vue.js.

vue-grid-layout vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout Current version: 2.3.9 (Supp

Danny Funkat 0 Feb 22, 2022
:iphone: Vue component for isotope filter & sort magical layouts

Vue.Isotope Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing isotope layout including filtering and sorting. Motivation Integrate Vue wit

David Desmaisons 345 Sep 6, 2022
Simplifies creating academic presentations with Slidev by providing the necessary components and layouts🎓

slidev-theme-academic Simplifies creating academic presentations with Slidev by providing the necessary components and layouts. Install Add the follow

Alexander Eble 25 Sep 22, 2022
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
🦄Indigo Layout Basic styles and components set for building user interfaces.

Indigo Layout Basic styles and components set for building user interfaces. Documentation Documentation NPM scripts Development mode npm run watch or

Awes.io 44 Jul 15, 2022
A vue layout component to provide dynamic, reactive media query information

Vue-Breakpoint A vue layout component to provide dynamic, reactive media query information. Uses the match media api.

Alex Regan 9 Jan 2, 2020
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
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Bartłomiej Kozal 87 Dec 20, 2021
A vuejs grid with draggable and resizable boxes

dnd-grid A vuejs grid with draggable and resizable boxes Demo page The demo requires Vue >= 2.3.0 because of the ":layout.sync" feature The components

null 308 Jul 17, 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 flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

Sergej Sintschilin 13 Oct 3, 2020
Lightweight set of functional grid components

vue-grid-styled Vue.js port of @jxnblk's React library, grid-styled Installation yarn add vue-grid-styled Default Theme // Breakpoints const breakpoin

Matt Rothenberg 17 Aug 23, 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
🧙‍♂️🔌 Responsive Magic Grid for Vue

Vue-Magic-Grid This is a Vue.js port of @e-oj's Magic Grid. Please check the /test folder for a example. If you use images, make sure they have a set

Emmanuel Olaojo 172 Aug 17, 2022