sdras / cssgridgenerator Goto Github PK
View Code? Open in Web Editor NEW๐งฎ Generate basic CSS Grid code to make dynamic layouts!
Home Page: https://cssgrid-generator.netlify.com/
License: MIT License
๐งฎ Generate basic CSS Grid code to make dynamic layouts!
Home Page: https://cssgrid-generator.netlify.com/
License: MIT License
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:
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 ?? ๐ค ๐
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
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;
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)
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
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.
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).
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
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)
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.
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!
On mobile, 2 divs are placed each time the user taps
It would be nice to set breakpoints, freeze the col and rows and drag the divs around for responsive implementation.
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.
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.
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.
grid-column-gap
and grid-row-gap
have been obsolete for a few years now. The generated code should use the new properties.
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โ.
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 ๐
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 :)
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
What do you think ?
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.
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
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.
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.
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
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".
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
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/
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?
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?
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!
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 ๐คท๐ผโโ๏ธ
Right now a stop-gap is in place, but it's not fully implemented. Ran out of steam/time.
It would be cool to save the grid state to the URL so you can share it.
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
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
Column and row gaps currently only allow for pixel values.
Adding other units (like vw
, vh
, em
and rem
at least) would be useful.
Why isn't there available option to get HTML code as well, with CSS one?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.