sdras / cssgridgenerator

🧮 Generate basic CSS Grid code to make dynamic layouts!

CSS Grid Generator

Site: https://cssgrid-generator.netlify.com/

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.

cssgridgenerator's Issues

Work on touch on mobile

Right now a stop-gap is in place, but it's not fully implemented. Ran out of steam/time.

If fr value is same for grid-template-columns & grid-template-rows then why not use repeat!

Hey Mam,

If in case the fr value is same in grid-template-columns & grid-template-rows ... shouldn't we use

grid-template-columns: repeat(10, 1fr); 
grid-template-rows: repeat(10, 1fr);

Mobile touchscreen bug

On mobile, 2 divs are placed each time the user taps

divs overlaying each other

why is it allowed for divs to overlay one over another?
this must be some kind of bug.
it's absurd that one can layer divs on top of each other.

Fix row inputs centering

Fields beside the row are not centered with the relative row:

Displays column and row numbers (Request feature)

What ?

• Displays column and row numbers (Feature)

Image

add width, height and a border for display the Grid in the filters

when we copy the Css code in Codepen for example there is no vue because we don't have a width height and border or background-color so oblige to add them in a new class for all child div

like that for exemple :
.alldiv {
width: 300px;
height: 200px;
border: 1px solid black;
border-radius: 10px;
}

my codepen that i do with you Css Grid Generator
https://codepen.io/thomaschalanson/pen/MWvJZqw

Missing curly brackets on parent div

There is a missing curly bracket after the parent div

.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px; // Missing "}" here
.div1 { grid-area: 1 / 1 / 5 / 3; }
.div2 { grid-area: 1 / 3 / 3 / 5; }
.div3 { grid-area: 3 / 3 / 5 / 5; }
} // was not accepted by CSS file

Usability the cards

I first opened the grid generator and it took me a long time to see the close div button (x), my suggestion is to increase the close button, i can make the change if for necessary

Seen this one?

This is another cool one. It makes compound grids. I know this isn't an issue but I just thought you might find it useful. https://codepen.io/Balloony/pen/abboxwV

I didn't make it I just forked it so I could add "max 12" to the inputs.

Set browserslist correctly

A correct browserslist must be defined in order to let PostCSS (already running with Vue CLI) prefix the code. I have a PR ready, i can suggest browsers version where the grid module is natively supported:

[
  "last 2 Chrome versions",
  "last 2 Firefox versions",
  "last 2 Safari versions",
  "last 2 Edge versions"
]

Then remove prefixed code around the repo.

Allow "auto" values for rows/columns

It would be nice to support auto, as well as max-content and min-content for row and column sizes.

I imagine adding tests for them here would work:

cssgridgenerator/src/components/AppGrid.vue

Lines 89 to 96 in 54e9970

	/fr/.test(unit) ||
	/px/.test(unit) ||
	/%/.test(unit) ||
	/em/.test(unit) ||
	/rem/.test(unit) ||
	/vw/.test(unit) ||
	/vh/.test(unit) ||
	/vmin/.test(unit);

But I'm not sure how to visualise that on the grid (since the rows/columns have no content to size by). Maybe just default to a ~2rem height/width? We can probably assume the user knows what they're doing if they've typed min-content in.

I've never written any Vue before but happy to learn to try and PR if you think this would be worthwhile.

IE Implementation?

Firstly this is an amazing tool, thank you so much for making it :)

This is more of a feature request, and I appreciate that using the IE syntax for grid isn't always the best way to go / a viable solution. However, may be nice to have the option to generate the code for this, as sometimes autoprefixer doesn't quite do the job. Maybe this would be off by default and be an option that could be toggled on?

Add "clear" button?

First of all, this is a pretty awesome way to visualize the grid. Thanks! 🙌

Since the divs you make aren't editable (or at least I couldn't figure out a way to edit the divs), it might be nice to add a "Clear" button that will remove any of the added divs so you can start over. Of course, you can refresh the page I guess, but that also resets your columns/rows layout.

Thanks for the hard work!

Problems with single column

When set column quantity to 1 (+ 5 rows by default). The grid shows on preview 1 row with 5 columns, instead of 1 column and 5 rows. The code in the "Your Grid Code" is correct.
In Dev Tools you can see grid-template-columns: repeat(5, 1fr);, must be grid-template-columns: 1fr;

Add query param support for URL sharing

It would be cool to save the grid state to the URL so you can share it.

"Reset Grid" does not work

Hello there,

First of all thanks for this very good app which gave me a basic understanding of CSS Grids but I think "Reset Grid" feature does not work on Chrome and Firefox or is it just me?

Video:

https://www.loom.com/share/1486c9a3c5c64538b232af74cfebec87

Dragging bottom to top and right to left doesn't have the same behavior as dragging top to bottom and left to right

In this screenshot, .div1 was created by clicking the top left cell and dragging to the bottom left cell, .div2 was created by clicking the bottom left cell and dragging to the bottom right cell. .div3 and .div4 were created by dragging around the right and top edges in the same manner. I would have expected .div3 and .div4 to create "complete" rows and columns like .div1 and .div2 are.

Thanks for your hard work on this and everything you do!

Should Reset Grid button reset row/column/gaps to original values.

The Reset Grid button is somewhat confusing. Earlier I thought it resets the row/column/gap values but it just resets selections. @sdras Should it clear everything? I am happy to add PR.

rows appear out of main container

When add rows with total height in pixels more than "gridcontainer" height it appears out of the box.

Issues when div goes over 20

There seems to be a problem with the labelling over div20

Add a warning about keyboard navigation order

Rachel Andrew mentioned that the way people can build with this might mess with keyboard navigation order, there should be some sort of warning: https://tink.uk/flexbox-the-keyboard-navigation-disconnect/

Possibility to upload a background image to align grid with my design

Hello !

I love your website and your project, I would love to be able to change the background image to align the grid with my image!

Thanks, you can delete/move this since it's not an issue but a “request”.

accessible modal notes

would be good to close modal on pressing escape or clicking outside.

next level would be to trap focus in the modal. copy to clipboard button also doesnt seem to be tabbable.

:) (just practicing what ive learned about a11y, i'm not at all an expert)

Bad experience on dragging

When you drag the mouse , where you want to put the div, it only works once, then you have to click out of the box to create another a large div

braces for the first css selectors

The braces for the first selector in the created CSS code creates the closing braces at the end of the file instead of closing that first selector

HTML code?

Why isn't there available option to get HTML code as well, with CSS one?

Consider using grid-template-areas

Hey Sarah, thank you so much for an impressive and really useful project like this!

Have you considered using grid-template-areas for simpler layouts which may make output code more readable, e. g.

.parent {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 70px 1fr 140px;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  grid-template-areas: "div1 div1"
                       "div4 div2"
                       "div4 div3";
}

.div1 { grid-area: div1; }
.div2 { grid-area: div2; }
.div3 { grid-area: div3; }
.div4 { grid-area: div4; }

Versus:

.parent {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 70px 1fr 140px;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 2 / 2 / 3 / 3; }
.div3 { grid-area: 3 / 2 / 4 / 3; }
.div4 { grid-area: 2 / 1 / 4 / 2; }

This isn't an option for layouts that have overlapping areas, however.

Output CSS + HTML in "Your Grid Code" window

Would it be possible to get the html markup as well as the css code when you click on the button for Please may I have some code ?

Basically, make the html markup available as well so that its very simple to copy paste into a file and preview it

Thanks for the great website. This is really helping me to get started with CSS grids 👍

Preview of selected area while dragging

Hi,

I was thinking of a feature where you could see the area you're selecting while dragging the mouse across. Currently, the selected area gets visible only when you release the mouse button.

Thoughts ?? 🤔 😄

Make the generated code visible from the main screen so that learners can see how it works

As a learner of css grid (you know like literally everyone) it would be extremely satisfying to see the code generated as I make tweaks so that I can see how it all works.

• Code should be be visible from the main interface.
• Making changes should automatically update the generated code.

Nested Grids?

This is really a feature request. I love the simplicity of your tool, for quick and dirty grid configuration I love it! It has some quirks, most of which I think already have issues, but overall it is really nice how simple and easy it is to use.

I am wondering, though...could this be extended, without losing the simple design...to support nested grid layouts?

Transparent Div after ".div21"

When you click to create a new div, you will get a colorful div
when you have more than 21 div it will be transparent with no colors
see this :

i think the problem is here:

cssgridgenerator/src/components/AppGrid.vue

Line 171 in f4ec8a4

// fruit loops!

What do you think ?

Output Parent names

just a little feature to add
it would be great if I could name my parent and children elements so I wouldn't have to edit the grid output each time I copy and paste it :)

Reset Grid Button Does not take affect

So when we create a specified CSS gird there, We can not reset the layout. I think there is a bug with the store.js file in related function

Clicking "Reset Grid" appears to disable the click & drag motion

Thanks for this awesome site! Dropping this here to start my own investigation and I figure someone else may beat me to the fix, which is fine.

Reproduction

• Open the site (in my case, in Chrome)
• Click and drag to create a div
• Click "Reset Grid" button
• Attempt to drag over another region to start again

Expected behavior: Drawing still works
Actual behavior: Don't seem to be able to click & drag anywhere anymore

Note: the behavior also happens if I click the x on the div prior to resetting the grid. Anytime the button is clicked, it appears the click/drag functionality stops working as well.

No errors in the console or anything that points to an obvious culprit (for me at least).

Screen Capture

Stacking lots of divs makes text hard to read

I don't know why I just kept clicking but it doesn't really get weird until 21. When the columns, rows, and gaps are maxed out it is more apparent. I was able to reproduce this on Chrome, Edge, and Firefox.

Thank you for making this, it's super cool!

CSS Unit Error Message won't go after proper unit is given

The error message message that comes in second column in particular doesn't go away even after proper CSS unit is entered.

Mobile modal size

The margin is too wide

Add Media Queries

It would be nice to set breakpoints, freeze the col and rows and drag the divs around for responsive implementation.

CSS output modes

• Add plain CSS output mode by default for those not using SCSS/Sass
• Add newline format option. (Pasting into VSCode on Windows is double-spaced)

make it possible to undo/unselect divs?

accidental clicks can cause creation of extra divs we didnt mean to make.

the simple form of this is a "undo" mechanism. probably a vuex thing? idk

the bigger form of this is a click/touch mechanism or logic to know we want to delete stuff

the "galaxy brain" form of this is direct manipulation of the generated code to delete/edit stuff directly, and see the result visualized. altho arguably you could already do that in browser css tools 🤷🏼‍♂️

Allowing additional units for gaps values

Column and row gaps currently only allow for pixel values.

Adding other units (like vw, vh, em and rem at least) would be useful.

Switch to column-gap and row-gap

grid-column-gap and grid-row-gap have been obsolete for a few years now. The generated code should use the new properties.

Don’t show CSS unit error if value is 0

Repro step:

Enter 0 without a unit as one of the values.

Expected behavior:

Should render correctly without errors because 0 without a unit is a valid CSS value.

Actual behavior:

Following error message is displayed: "Must use real CSS units, goofball".

SCSS mode

Hello,

Very nice tool for people like me that are new to grid system.

However, I have a small suggestion. I use SCSS as a standard processor for my css. When I do something like this :

.div1 { grid-area: 2 / 3 / 4 / 5; }

It calculate the values. To force SCSS to just consider this as a string, I have to do :

.div1 { grid-area: {#"2 / 3 / 4 / 5"}; }

Like this, it works well.

Would ie be possible to add a small option in your tool : "display code as SCSS" and add that syntax to be able to do a quick copy / paste without adding manually this syntax when you use SCSS processor ?

Thank you

Error while building the application on a windows machine

Hi,

After running npm install, I ran npm run serve and getting this error in my terminal.Also, I am running this application on windows 10 machine -

cssgridgenerator-master\node_modules\open\index.js:11
const wslToWindowsPath = async path => {
^^^^
SyntaxError: Unexpected identifier
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\vn50afl\Desktop\cssgridgenerator-master\cssgridgenerator-master\node_modules@vue\cli-shared-utils\lib\openBrowser.js:9:14)
at Module._compile (module.js:570:32)

Modal is not scrollable when it's taller than screen (desktop)

I can't scroll the "What does this project do" modal at all on desktop (Edge Dev on Windows). My screen is 1366x768, and the modal is tall enough that the "Done" button is hidden below the fold. I can't get to the button due to a max-height.