### Grid Layouts: CSS Grid in Fidgets / Fidgetty!
And CSS grid is now available in Fidgetty's version of Fidget. Who needs HTML?!
Simplified code for the example:
frame "css grid area":
# setup frame for css grid
box 0, 0, 80'pw, 80'ph
fill "#FFFFFF"
# Setup CSS Grid Template
layout lmGrid
gridTemplateColumns ["first"] 40'ui ["second", "line2"] 50'ui
["line3"] auto \
["col4-start"] 50'ui ["five"] 40'ui ["end"]
gridTemplateRows ["row1-start"] 25'perc ["row1-end"] 100'ui
["third-line"] auto ["last-line"]
rectangle "css grid item":
# Setup CSS Grid Template
# note I'm working on sugar for these
columnStart 2.mkIndex
columnEnd "five".mkIndex
rowStart "row1-start".mkIndex
rowEnd 3.mkIndex
fill rgba(245, 129, 49, 123).to(Color)
# ...
Run
Note the basics are mostly working. Some syntax sugar needs to be added. Bug
reports are welcome! I've never used raw CSS grid in html myself. ;)
#### About CSS Grid
The core notion behind CSS grid are grid lines. Items on the grid set their
layout by selecting start & stop grid lines in column & row directions. This
can be done either using indexes or optional names. Grid lines are set based on
order and then track widths to create tracks (e.g. columns/rows).
Fraction units (`fr`) are important to CSS grid and make it easier than other
grid systems. `fr` units are based on fractions. All fractions per direction
are summed to create the denominator, so `gridTemplateColumns 1'fr 1'fr 1'fr`
would be close to `33%`. _However_ `fr` units first take into account any
`fixed` (pixel or ui) widths. This simplifies a lot of challenges with grid
layouts based on percentages mixed with fixed sizes. For example a fixed
padding of `1'em` (1 font size) around an item is trivial using
`gridTemplateColumns 1'em 1'fr 1'em`.
See the [CSS Tricks tutorial on css
grids](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end)
(first example, top right) for more details. The example above is taken from
the top-right of that tutorial.
#### Implementation Notes
I landed on CSS Grid because of the combination line-start/line-stop's and
fraction units (`fr`) make it easy to define complicated grids. Many things
like constraints are implicitly set. Many web devs should also feel familiar
with it too, which vibes well with Fidget's story in my mind.
The implementation largely it tries to follow CSS Grid, but I'm not planning to
follow the entire spec. Unless people want to pay me oodles of money to do so.
:P Also some differences may be due to how Fidget/Fidgetty works or for
performance reasons.
Note that there are still some items left to add like the `span` attribute on
the Grid Item locations. A few of the more advanced shortcuts haven't been
created yet. The syntax sugars is handled by macros currently to match CSS
syntax more closely. This could be changed but appears ok.
