GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - sdras/cssgridgenerator: 🧮 Generate basic CSS Grid code to make dynamic layouts!

BranchesTags
Open more actions menu

Latest commit

 

History

188 Commits
188 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
babel.config.js
babel.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
vue.config.js
vue.config.js
 
 
yarn.lock
yarn.lock
 
 

Repository files navigation

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.

About

🧮 Generate basic CSS Grid code to make dynamic layouts!

cssgrid-generator.netlify.com/

Topics

css-gridgenerated-codegenerated-layoutgridgrid-layoutgrid-systemnetlifyvue

Resources

Readme
MIT license
Activity

Stars

5.4k stars

Watchers

61 watching

Forks

568 forks
Report repository

Releases

Sponsor this project

Packages

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.