DEV Community


Discussion on: Introducing - an interactive CSS grid boilerplate code generator

illusionmh profile image

Thank you again for this tool, I hope it will be helpful to many people as a start point.

There is problem in MS Edge.
Click on "Get code" throws a exception
Exception in MS Edge debugger
Could be easily changed to className.

It is hard to see how items will align with content when.
Number of Items 8
Number of columns 3
Grid gap 10

For Item 1 set Column span 2 and Row span 2.
For Item 3 set Column span 1 and Row span 2.

It is hard to see how elements will overlap and "Lorem ipsum" text won't help here.
Resulted layout where hard to see overlap between Item 1 and Item 3

Is it possible to set something like min-height for items and increase it with when "row span" increased so it will be easier to see actual overlap?
Possible better solution

Forem Open with the Forem app