
CSS Grid Generator - raju
https://cssgrid-generator.netlify.com/
======
crispyambulance
CSS grid, where were you 15+ years ago?

CSS was such a mess for so long because of the complete lack of a consistent
easy-to-understand layout mechanism. This has spawned the creation of
countless workarounds and javascript gizmos, JUST SO you could stick something
on a webpage where you want to go and have it behave in a sane way under
resize and different browsers.

I welcome CSS grid, it reminds me of the sane layout managers we're used to
from writing desktop applications. It makes me wonder why we had to wait so
long for this functionality to be part of the CSS standard.

As for the generator, I think it's nice. Most folks will get the hang of
banging out arbitrary css grid layouts very quickly. This tool will accelerate
that for many.

~~~
the-dude
Because HTML was a document format, not an application container. Try
positioning something exact in Latex.

~~~
mmphosis
I am not going to start using Latex, but sadly this:

    
    
      <table border="0" cellpadding="0" cellspacing="0"><tr><td>...
    

still works just as well for layout than anything I've seen using CSS/HTML.
Even worse, all I want to do is tab over from some text:

    
    
      <code>(SUB X Y)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>subtract<br>

~~~
tootie
Serious question: Why can't I use tables and define cells sizes in terms of vh
and vw?

~~~
httpsterio
Tables are totally fine if what you're visualising is data that belongs in a
table. Tables for layouts are not semantically correct and breaks a lot of
expected behaviour for people with assisting technology.

Html shouldn't consider layouting, that's for css to do.

------
Someone1234
Nice. There are a few bugs:

\- Clicking multiple times in a box causes an unreadable mess

\- If the code gets too long the "Please may I have some code" model
disappears off the page, including the only way to close it ("Done" button).
Clicking outside the model doesn't close it nor does the escape key.

\- If you set rows or columns to -1 it generates a display artifact which
remains indefinitely.

\- "What does this project do?" model cannot be closed or read fully (outside
page limits).

I'm on Chrome retail latest (74.0.3729.169) with 125% Windows DPI.

~~~
UweSchmidt
125% DPI on windows, and similarly, large font on Android systemwide,
regularly cause problems.

Should software accomodate those settings or is that up to the user? What's
the HN consensus oh that?

~~~
thoughtpalette
If 125% DPI is a standard for your users, of course you should accommodate for
it when you can.

UI development has always been developing for the most common denominator and
then the best you can make it for the most amount of users.

If the user has a manual zoom in the browser, there's not much you can do from
a developer perspective.

~~~
ponyous
Is there any data on that? I am interested how many people use different % DPI
on desktop, what % of the people use scaled font sizes on iOS and Android.

~~~
thoughtpalette
There's plenty of resources out there for 'Browser Stats'. it would really
depend on the projects target audience. I have not personally seen any numbers
on DPI%, but I wouldn't be surprised if they exist.

You can achieve some flexibility in layout for device, resolution and pixel
ratio constraints using CSS media queries, it just depends how granular you
want to go and how much time it takes to implement all the use cases from a
business perspective (from experience)

------
rado
All I needed for my grids was display: table with row wrapping. I got magazine
layouts instead with worse vertical alignment of cell content. CSS Grid is
cool and does previously impossible things, but I wish the industry fixed old
techniques (where is 'gap' in flexbox?), instead of jumping on the next big
thing.

~~~
baddox
As far as I can tell, flexbox grid-gap might be coming soon. It's apparently
currently supported only in Firefox.

[https://developer.mozilla.org/en-
US/docs/Web/CSS/gap#Browser...](https://developer.mozilla.org/en-
US/docs/Web/CSS/gap#Browser_compatibility)

------
purerandomness
Absolutely love Sarah Drasner's projects! Attention to detail and great sense
of humour, thank you!

------
Sohcahtoa82
Is there a reason to use a CSS grid and not a <table>? Seems like web devs
have been crying about a missing feature for a long time when it's already
existed. But I only know the basics of web development and don't know best
practices, so I don't know why devs would be insisting on using CSS to create
a grid when an HTML table works just fine.

~~~
keiwo
The main reason is mobile responsiveness. With <table>, you need to conform to
all the table related elements like <tr>, <td>, etc, which is fine on desktop.

However when you want the table to collapse vertically instead of staying
horizontal on mobile, trying to overwrite the browser defaults of these
elements with CSS is a pain and not recommended. Using grid just makes it
easier to change the display in CSS.

You could argue that using CSS display:table works too, but display:grid just
brings a lot of other niceties for controlling how you want the page to look.

~~~
sureaboutthis
You are correct but many decried the use of tables for layout as far back as
1999.

------
warpech
Neat!

One comment though: The generated code contains nested selectors, which are
not valid CSS.

------
poisonborz
It sadly doesn't solve the problem with literally all and every grid generator
out there - no proper support for spans and areas. The biggest power of grid
is the free-form layouting it provides - it just gets lost in these simplistic
editors.

~~~
Theodores
I consider your comment to be constructive feedback.

The real power of grid is the features you speak of plus the alignment
features. With this editor you have a long way to go to create useful
responsive layouts with niceties such as implicit grids.

I am coming to the conclusion that you don't need a tool to make a grid for
you, that knowing how to write the CSS is where it is at.

The problem is that CSS Grid is a new mindset, if you have been brought up to
think in terms of things like '960 pixel wide' grids or how print newspapers
do grids then you are not going to fully get it.

I also do not like it how this example perpetuates the div element. According
to the specification the 'div' element is not to be used except for in a last
resort.

The CSS Grid way of working means there is no need for div wrappers. Centering
and aligning content can be done without the div. Again this requires new
thinking and people used to slapping divs everywhere with a multitude of class
attributes are still thinking they are working with a framework.

If you look at the code for the page rather than the generated code there are
a few off-spec 'crimes' that are not needed with CSS Grid. The 'main' element
should be in the 'body' as a direct descendent, with this page it nested
inside a section that is nested inside a div. This is then styled with flex
layout rather than CSS Grid. The page uses complicated calc hacks rather than
CSS Grid. The document structure is also quite wrong, the side panel is not an
'aside' outside of the 'main' content.

For this page I would go with '1fr auto' to define the columns. The sidepanel
would then take the space it needs and the grid take up the rest. No 'calc'
sums needed in the CSS.

Now if you type 'auto' in one of the columns (instead of 1fr) then you get
some patronising message saying "Must use real CSS units, goofball". The thing
is that for CSS Grid, 'auto' is what you want to be typing once or twice in
every project, not being able to use 'auto' (because apparently only goofballs
do it) indicates to me that this is quite a beginner project with a lot more
work needed.

CSS Grid enables you to strip out all presentational markup from a page, it
can be pure content using the HTML5 content sectioning elements. This is a
fundamentally different way of working than the hacks of the past. If you wish
to further bloat hacky HTML then this tool will help you do it, it won't
challenge ingrained attitudes and get people to the promised land of concise,
unbloated HTML that separates the concerns.

------
kaycebasques
What do you all think of this in contrast to Firefox's Grid Inspector? More
useful? Less useful? Serving different purposes?

[https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspecto...](https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)

To put my question another way, I'm trying to figure out where people really
need help while creating Grid layouts. Whether we need tools to deeply inspect
existing layouts, or whether we just need tools to quickly generate layouts
(like Sarah's tool).

Disclosure: I work on Chrome DevTools.

~~~
andrei_says_
I am a dev so I would not use a generator. A tool which gives me instant
feedback on the code I write is much more useful. So Firefox CSS Grid and
Flexbox inspectors are extremely useful.

~~~
onion2k
_I am a dev so I would not use a generator._

Every good dev I've ever worked with uses generators of some sort or another.
There are entire languages dedicated to code generation and scaffolding apps
(Cargo, Rails, Yeoman etc.. Yeoman even has generator generators for making
new generators). If you're not using them then you're missing a _massively_
useful productivity hack.

~~~
andrei_says_
You’re right. Mine was not a blanket statement but sounded like one.

I do use rails generators; if possible I’d never want to touch webpack config.

However I would not use css grid generators because I’d prefer the
understanding and precision of hand coding css grid specifically.

------
jhpratt
I'm surprised to see this big of a reaction. I created something with nearly
identical features (only missing the ability to specify gaps) right when grid
was released. There was some interest, but not a ton.

------
SamWhited
As usual with these tools, they're very useful (probably) but almost unusable
by anyone with bad contrast vision. Please up the contrast on all the various
borders and controls like the arrows on the various number selectors. I can
barely use them and I don't think my contrast perception is actually all that
bad, this must just be a big black square to someone with properly bad
contrast perception.

------
sireat
CSS Grid and its named areas are fantastic!

In my experience teaching web dev to complete beginners, everyone has been
able to create reasonable layouts with CSS Grid.

That's an improvement over flexbox which shines and is meant for 1D layouts
but requires heavy pushing and shoving for more difficult 2D layouts.

------
mchudgins
The linked github repo
([https://github.com/sdras/cssgridgenerator](https://github.com/sdras/cssgridgenerator))
isn't (publicly) available yet?

~~~
baddox
It is now!

------
temp99990
I’ve had a lot of success using flexbox personally, and at least on my own
projects I develop features on a page in 1D vs 2D...

------
wolfspider
I was working on something using CSS grids and this has given me so many new
ideas- this is great!

------
keithnz
this tool feels very clunky and non obvious, can't imagine using it for
anything useful

------
tide_ad
what the heck are these grid tags in the generated code?

I was thinking I was about to applaud a flex-box wizard that masterfully did
ordering and more, but instead I see tags that I'm seriously not sure about.
Are they compatible with the rest of my flex-box related site with Bootstrap
all over the place? Are they compatible with my child elements and
positioning?

Too many questions for this day and age. I don't think enough people are
familiar with those particular tags that get generated, but if thats the "new
way" lets revisit this in 2021

~~~
justusthane
Um, what? It's CSS Grid [1]. It's separate from Flexbox.

[1]: [https://css-tricks.com/snippets/css/complete-guide-grid/](https://css-
tricks.com/snippets/css/complete-guide-grid/)

