[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)