You can use css grid generator here.
Created using Vuejs and vuetifyjs framework.
-
Create a new grid using the "+ ADD NEW GRID" button.
-
Add rows and columns from the grid's properties panel on the right.
-
Add elements to the grid. Default element type is div, but elements like header, main, section, aside and footer are available.
-
(Optional) Create a grid template using the button "TEMPLATE AREAS" from the grid's properties panel.
-
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.
-
Switch to tablet and mobile view to create different settings per screen.
-
(Optional) You can edit the screen break points by clicking the "EDIT BREAKPOINTS" button of the toolbar.
-
Export the generated html and css using the "VIEW HTML/CSS" button of the toolbar.
-
Elements can now be animated using Animate.css - Use the buttons Play and Stop animation at the top bar for preview.
-
Grids can be nested by selecting type "grid" in element type