[HN Gopher] Building a Hexagonal Grid in CSS ___________________________________________________________________ Building a Hexagonal Grid in CSS Author : indentit Score : 86 points Date : 2020-06-19 17:54 UTC (5 hours ago) (HTM) web link (ninjarockstar.dev) (TXT) w3m dump (ninjarockstar.dev) | danellis wrote: | I see a lot of convoluted CSS things like this. Is there not much | awareness of SVG in the webdev community, or is there some other | reason people don't want to use it? | seph-reed wrote: | SVG is not typically very responsive (mobile, desktop), and you | end up digging yourself into a "no support" hole. | | It seems the web community is dedicated to forcing things to | work until they become fully supported features of HTML. | | Also, in this case, CSS grid is a very good choice for layout, | but the background could totally just be an svg. | nimchimpsky wrote: | how would svg help ? Its not an image of a grid they want. | chrisshroba wrote: | If you wanted arbitrary HTML content in the hexagons, would you | be able to use SVG? I know you could hack together similar | output since SVG supports images, links, text formatting, etc., | but I can see people liking the idea of the hexagonal | containers being plain divs that you can put whatever content | you want into. | edoceo wrote: | Putting nice markup (or even OK formatted text) into SVG has | been a pain for me. | | I put an SVG background, then layer the HTML over it. | | It works but, I'm not happy about it. | nybble41 wrote: | You can put arbitrary HTML elements inside an SVG element | embedded in an HTML page: | | https://developer.mozilla.org/en- | US/docs/Web/SVG/Element/for... | Fellshard wrote: | This example doesn't even show how it would place content | inside the grid... and I suspect any attempt to do so with | anything more than trivial text excerpts would result in the | layout shattering, or the content clipping. And attempting to | fit hexagonally-shaped content into the exact elements of the | grid seems even less likely, here. | josephwegner wrote: | This is a must read if you're working with hex grids: | https://www.redblobgames.com/grids/hexagons/ | juanca wrote: | I would like to see this where each edge is also uniquely | addressable. | greencore wrote: | Impressive! It's interesting for me if such grade CSS developers | get same compensation as their JavaScript counterparts. | lecarore wrote: | I think not, because despite the high quality of the pure CSS | result, there's probably a js lib out there that will get the | same result for a few hundred extra kilobytes in the bundle. | But knowing CSS is still very useful as a skill, it's usually | your "moat" that makes it hard for backend devs to do your work | while you're on vacation. ___________________________________________________________________ (page generated 2020-06-19 23:00 UTC)