Skip to content
🧮Generate basic CSS Grid code to make dynamic layouts!
Branch: master
Clone or download
sdras Merge pull request #54 from ysfscream/zh-CN
Add Chinese translation
Latest commit b379848 Jun 5, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
public open graph image May 28, 2019
src Add Chinese translation Jun 6, 2019
.gitignore initial commit May 26, 2019
LICENSE Initial commit May 26, 2019 add in screenshot to readme May 28, 2019
babel.config.js initial commit May 26, 2019
package.json Added vue-i18n dependency May 29, 2019
vue.config.js import the main styles May 26, 2019
yarn.lock Merge branch 'master' into i18n-and-spanish Jun 2, 2019

CSS Grid Generator

Site deployed on Netlify:

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.

You can’t perform that action at this time.