Skip to content

Latest commit

 

History

History
30 lines (15 loc) · 1.21 KB

README.md

File metadata and controls

30 lines (15 loc) · 1.21 KB

CSS Grid Generator

You can use css grid generator here.

Created using Vuejs and vuetifyjs framework.

How to

  1. Create a new grid using the "+ ADD NEW GRID" button.

  2. Add rows and columns from the grid's properties panel on the right.

  3. Add elements to the grid. Default element type is div, but elements like header, main, section, aside and footer are available.

  4. (Optional) Create a grid template using the button "TEMPLATE AREAS" from the grid's properties panel.

  5. Assign a template area to an element or use the column-start column-end row-start row-end properties to position your element on the grid.

  6. Switch to tablet and mobile view to create different settings per screen.

  7. (Optional) You can edit the screen break points by clicking the "EDIT BREAKPOINTS" button of the toolbar.

  8. Export the generated html and css using the "VIEW HTML/CSS" button of the toolbar.

Update

  1. Elements can now be animated using Animate.css - Use the buttons Play and Stop animation at the top bar for preview.

  2. Grids can be nested by selecting type "grid" in element type