Only Vue 3 for now! This plugin includes 3 global components: simple-grid-container,simple-layout-container and simple-grid-item,that will help you to build excellent layout for your app.

Overview

simple-vue-grid

Only Vue 3 for now! This plugin includes 3 global components: simple-grid-container,simple-layout-container and simple-grid-item,that will help you to build excellent layout for your app.

Installation

NPM

npm i simple-vue-grid
// main.js
import { createApp } from "vue"
import App from "./App.vue"
import SimpleVueGrid from "simple-vue-grid"

// optional. If you want to change all default breakpoints or part of them.
const options = {
  breakpoints: {
    xl: 1400,
    xxl: "1920px"
  }
}

createApp(App)
  .use(SimpleVueGrid, options)
  .mount("#app")

And now plugin is ready to use! All containers is registered globally.

Default breakpoints:

{
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1400
}

How to use

simple-grid-container

Just put all your items inside this container and tell him minimum width of columns. It will do all the hard work. The container is elastic and will adapt to all screen sizes, depending on how many columns with this width will fit on the display.

For example:

{{ item.id }}

">
  
   
    
    

{{ item.id }}

Also you can set follow props:

  • gap - for gap between your items.default: none. Add gap both to rows and columns.
  • elastic-columns - for minmax(columnWidth, 1fr) style. default: true. In most cases just don't change it.
  • inline - for inline-grid css rule, default: false
  • class - because container is just div tag. You can apply all css styles, as well as to all containers in this plugin. Also you can add grid rules like row-gap and column-gap.

simple-layout-container

This container will help you in more complex situations. You can tell to cols prop how to build your layout. For example:

  • cols="200px 300px 100px"
  • cols="1fr 50px 1fr 1fr"
  • :cols="colsSchema" - dinamic layout
  • lg-cols"repeat(5, 1fr)" - add lg- to cols for lg breakpoint schema. lg is 992px by default.

For more variants see link

Props:

  • gap - same as simple-grid-container
  • inline - for inline container. default: false
  • cols - cols Schema
  • rows - rows Schema
  • 'breakpoint'-cols - set cols Schema for specific breakpoint
  • 'breakpoint'-rows - set rows Schema for specific breakpoint

simple-layout-item

Grid item container help you locate your item on layout that you built in simple-layout-container. The location can be changed depending on the width of the screen.

Props:

  • tag - html tag of item container. default: "div"
  • startColumn - start column of item
  • columnSpan - the number of columns it occupies
  • startRow - start row of item
  • rowSpan - the number of rows it occupies

Full example:

Grid Item

{{ item.id }}

">
  
   
    
    
      
     

Grid Item

{{ item.id }}

Plans

  • Make it work with Vue 2
  • TypeScript
  • Tests
  • Masonry container

Contributing and Issues

Contribution is welcome! This documentation also needs some improvement. For bugs and issues please open new issue here.

Project setup

npm install

Compiles and hot-reloads for development

This command will run example folder

npm run serve

Run your unit tests

npm run test:unit

Build package

npm run build-library
You might also like...
VueQuintable is a table wrapper for Vue.js 2.x. It is build with bootstrap 5.x. High configurable, easy to use, flexible and responsive.
VueQuintable is a table wrapper for Vue.js 2.x. It is build with bootstrap 5.x. High configurable, easy to use, flexible and responsive.

VueQuintable is a table wrapper for Vue.js 2.x. It is build with bootstrap 5.x. High configurable, easy to use, flexible and responsive.

A table build with vue and bootstrap!
A table build with vue and bootstrap!

Vue-table What is Vue-table vue-table is Vue component based on Vue, Bootstrap and Ramda. vue-table only works only with Vue 2.0 Feature pagination co

A flexible grid component for Vue.js

vue-grid A flexible grid component for Vue.js vue-grid is designed to be an advanced Vue.js grid component allowing for fast loading and rendering of

A powerful flexbox grid system for Vue.js 2.x, built with inline-styles

vue-grid A powerful flexbox grid system for Vue.js 2.x, built with inline-styles Installation npm install @liqueflies/vue-grid --save # or yarn

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)
A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)

A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)

🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...

vue-easytable English | 中文 Introduction Based on vue2.x flexible table components. v2.0 New Version Complete rewriting of version 1.0. Based on JSX sy

Spreadsheet data grid component. Handles enormous data processing.
Spreadsheet data grid component. Handles enormous data processing.

Powerful data grid component built on top of RevoGrid. Millions of cells and thousands columns easy and efficiently. Demo and API • Key Features • How

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering, sorting, and CRUD operations.

Comments
  • more .vue file ?

    more .vue file ?

    Hello,

    i did not understand how to work with the simple-vue-grid when i have more than one .vue File. Do i have to dublicate everything from my main.js into the other pages ? i did design a global grid (row1-header/row2-content/row3-footer) and then the just add special aspects (for example about-page) in a cell (row/colums) which is a "part" of the global grid. so i want to overtake header and footer (this works) but it always put the about-content in the header-row instead of the content-row? How can i managed that ?

    i defined a new grid-item in the right row (2) but this is placed always in row 1?

    <simple-grid-item
      tag="content" class="content"
      startColumn="1" columnSpan="1"
      startRow="2" row-span="1"
      lg-col="1" md-col="1" sm-col="1" xs-col="1"
    >
    
    opened by krungle-mataman 2
Vue 3 data grid spreadsheet - Powerful data grid component built on top of RevoGrid.

Vue 3 data grid spreadsheet - Powerful data grid component built on top of RevoGrid.

Revolist 79 Dec 31, 2022
Vuejs-job-sorting - Simple Vue.js 3.0 app with a litlle TypeScript help

vuejs-job-sorting Simple app created with Vue.js 3.0 and Typescript

null 0 Jan 10, 2022
Vue.js 2 grid components

Vue 3 package is now available for subscribers The package is stored on the vue3 branch. Please see instructions here There are almost no breaking cha

Matanya 1.5k Dec 29, 2022
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

Module SonarCloud Status ag-grid-community ag-grid-enterprise ag-Grid ag-Grid is a fully-featured and highly customizable JavaScript data grid. It del

ag-Grid 9.5k Dec 30, 2022
Use columns in block fields based on the layout field.

Kirby Column-Block Overview Use columns in block fields based on the layout field! ?? Features: Use it as WYSIWYG Use paste (cmd+v) to insert any bloc

Roman Gsponer 22 Dec 22, 2022
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Yev Vlasenko 936 Jan 4, 2023
FancyGrid - JavaScript grid library with charts integration and server communication.

FancyGrid Build v1.7.150 FancyGrid - JavaScript grid library with charts integration and server communication. Install bower bower install fancygrid

FancyGrid 191 Sep 28, 2022
A simple grid-based web viewer for Formula 1

A simple grid-based web viewer for Formula 1. Simply login with your F1TV credentials, select the season, event, and session, and then drag and drop the channels you want to watch into the grid! Unable to install it? No problem! The application can be fully accessed here

John Arrandale 148 Dec 19, 2022
Arne De Smedt 122 Dec 26, 2022
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.

This is the official wrapper of Handsontable data grid for Vue. It provides data binding, data validation, filtering, sorting and more. Installation U

Handsontable 750 Jan 4, 2023