Show Nim: CSS Grid layout engine!

[elcritch]

Hey folks, my pure Nim _CSS Grid_ layout engine has reached an alpha "MVP" 
status! It implements roughly 70-80% of the CSS Grid spec. I just finished 
getting the initial _auto-placement algorithm_ working and wanted to share the 
progress.

The code is here: 
<https://github.com/elcritch/fidget/blob/devel/src/fidget/grids.nim>

If you're new to (modern) CSS Grid, Adobe has a great write-up on the [benefits 
of a CSS Grid 
layout](https://xd.adobe.com/ideas/principles/web-design/benefits-css-grid-layout-web-design/).

### Notes

The module currently works with my fork of Fidget 
([elcritch/fidget](https://github.com/elcritch/fidget)), but is written to be 
separable into its own package. It's part of my efforts to make 
[Fidgetty](https://github.com/elcritch/fidgetty) be able to provide a nice 
suite of re-usable widgets built on top of 
[Fidget](https://github.com/treeform/fidget).

I'll likely split CSS Grid into it's own nimble package at some point since CSS 
Grid provides a fairly handy general UI layout system. I could see it being 
useful for TUI's or ImGUI, etc. If folks are interested in that, feel free to 
ping me on Discord.

#### Auto Placement Demo

The non-orange boxes are automatically placed and overflow into the second row 
once the top one is full:

Beware the * auto-placement* support is currently very minimal but should be 
flushed out soon.

#### Constraints Demo

Here's what a clone of the "Constraints" section in the main Fidget demo looks 
like (code is below):

##### Example Source

This example is intentionally verbose. It's also possible to use numbers 
instead, but using names makes it easier to edit.
    
    
    proc drawMain() =
      frame "autoLayout":
        # setup frame for css grid
        font "IBM Plex Sans", 16, 400, 16, hLeft, vCenter
        box 10'pw, 10'ph, 80'pw, 80'ph
        fill "#FFFFFF"
        
        # Setup columns using inline syntax
        gridTemplateColumns ["left"] 30'ui ["outer-left"] 2'fr ["middle-left"] 
3'fr ["center-left"] 100'ui \
                            ["center-right"] 3'fr ["middle-right"] 2'fr 
["outer-right"] 30'ui ["right"]
        
        # Setup rows using a command-style syntax (one per row)
        gridTemplateRows:
          ["top"] 30'ui
          ["outer-top"] 2'fr
          ["middle-top"] 3'fr
          ["center-top"] 100'ui
          ["center-bottom"] 3'fr
          ["middle-bottom"] 2'fr
          ["outer-bottom"] 30'ui
          ["bottom"]
        
        rectangle "TR":
          gridColumn "right" // "outer-right"
          gridRow "top" // "outer-top"
          fill "#70BDCF"
        rectangle "TL":
          gridColumn "left" // "outer-left"
          gridRow "top" // "outer-top"
          fill "#70BDCF"
        rectangle "BR":
          gridColumn "right" // "outer-right"
          gridRow "bottom" // "outer-bottom"
          fill "#70BDCF"
        rectangle "BL":
          gridColumn "left" // "outer-left"
          gridRow "bottom" // "outer-bottom"
          fill "#70BDCF"
        
        rectangle "Center":
          gridColumn "center-left" // "center-right"
          gridRow "center-top" // "center-bottom"
          fill "#FFFFFF", 0.50
        rectangle "Scale":
          gridColumn "middle-left" // "middle-right"
          gridRow "middle-top" // "middle-bottom"
          fill "#FFFFFF", 0.25
        rectangle "LRTB":
          gridColumn "outer-left" // "outer-right"
          gridRow "outer-top" // "outer-bottom"
          fill "#70BDCF"
    
    
    
    Run