====== CSS Grid ======

Most Angular interfaces in Evergreen use the [[https://getbootstrap.com/docs/5.2/layout/grid/|Bootstrap grid]] for layout. Bootstrap's 12-column grid is based on [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|Flexbox]], which is great for laying out items of unknown width horizontally, but not so great at layouts that require control of both axes.

Some newer interfaces are beginning to use the [[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout|native CSS grid]] layout, which offers more control over both dimensions than Flexbox.

CSS Grid references: 

  * [[https://www.joshwcomeau.com/css/interactive-guide-to-grid/|An Interactive Guide to CSS Grid]]
  * [[https://gridbyexample.com/examples|Grid by Example]]
  * [[https://css-tricks.com/snippets/css/complete-guide-grid/|CSS Tricks: A Complete Guide to CSS Grid]]
  * [[https://www.sitepoint.com/css-grid-web-form-layout/|The Benefits of Using CSS Grid for Web Form Layout]]