howto: website layout - grid how-tos    rev  7 oct 2018

.......................................................
info:

  grid is best for layouts.


.......................................................
gotchas:

  * fr:
     one resource says it means "free space"
     another says it means "fractional unit"
     anyway, one fr (1fr) will automatically distribute the space equally.

.......................................................
resources:

  * using css grid - the basics

      o CSS Grid — Responsive layouts and components
          good tutorial and sample code
          https://medium.com/deemaze-software/css-grid-responsive-layouts-and-components-eee1badd5a2f
      o Gallery Grid With CSS Grid
          Laura Kalbag
          https://laurakalbag.com/gallery-grid-with-css-grid/

      o How to Efficiently Master the CSS Grid — in a Jiffy
          Ohans Emmanuel
          the 20% you need for 80% efficiency with the CSS Grid layout.
          https://medium.com/flexbox-and-grids/how-to-efficiently-master-the-css-grid-in-a-jiffy-585d0c213577

      o Useful patterns, at Grid by Example
          Rachel Andrew.
          https://gridbyexample.com/patterns/


      CSS Grid – Table layout is back. Be there and be square. 
            actually, it's about page layout. pretty clear.
          Surma
          https://developers.google.com/web/updates/2017/01/css-grid
          jul 2018 (?)


  * using css grid - everything

      o CSS-Tricks Comlete Guide to Grid
          https://css-tricks.com/snippets/css/complete-guide-grid/
        Simplified:
          https://css-tricks.com/dont-overthink-it-grids/

      o Mozilla Developer Docs for CSS Grid
          https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

      o Grid by Example
          Everything you need to learn CSS Grid Layout
          a collection of examples, video and other information 
          to help you learn CSS Grid Layout. 
          Rachel Andrew.
          https://gridbyexample.com/

      o The Dark Side of the Grid
           https://www.matuzo.at/blog/the-dark-side-of-the-grid/
           [jul 2019]
           Manuel Matuzović
           A series of 3 articles about CSS Grid layout and accessibility.
           - may come at the cost of user experience and accessibility 
             if we don’t use it responsibly.


_______________________________________________________
.Do  .Do-webwork  
since:  7 oct 2018
-- 0 --