GridLab

CSS Grid research

Frameworks & libraries using CSS Grid

• Blueprint CSS https://blueprintcss.dev/
• FlashGrid (Codyhouse) https://github.com/CodyHouse/flashgrid
• Raster https://github.com/rsms/raster
• Tailwind https://tailwindcss.com/components/grids/

Grids from popular CSS frameworks

• Bootstrap https://getbootstrap.com/docs/4.0/layout/grid/
• Foundation https://get.foundation/sites/docs/xy-grid.html
• Bulma https://bulma.io/documentation/columns/basics/
• Semantic UI https://semantic-ui.com/collections/grid.html
• Pure CSS https://purecss.io/grids/
• UI Kit https://getuikit.com/docs/grid
• Materialize CSS https://materializecss.com/grid.html
• Tachyons http://tachyons.io/docs/layout/grid/
• Primer https://primer.style/css/objects/grid

Surveys and lists

• https://2019.stateofcss.com/technologies/css-frameworks/
• https://github.com/troxler/awesome-css-frameworks

Best Practices

• Best Practices With CSS Grid Layout https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/
• The Grid System: Building a Solid Design Layout https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout

Browser Compatibility

• Can I use (CSS Grid) https://caniuse.com/#search=grid
• CSS Grid in IE: Debunking Common IE Grid Misconceptions https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/
• CSS Grid in IE: CSS Grid and the New Autoprefixer https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
• Using CSS Grid: Supporting Browsers Without Grid https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

Resources & Showcases

• CSS Grid Garden http://cssgridgarden.com/
• Grid by Example https://gridbyexample.com/
• CSS Grid Playground https://mozilladevelopers.github.io/playground/css-grid/
• CSS Reference - CSS Grid https://cssreference.io/css-grid/
• Learn CSS Grid https://learncssgrid.com/
• CSS Grid Starter Layouts https://css-tricks.com/snippets/css/css-grid-starter-layouts/
• The Dark side of the grid https://www.matuzo.at/blog/the-dark-side-of-the-grid/

Experts

• Rachel Andrew https://github.com/rachelandrew
• Jen Simmons https://github.com/jensimmons
• Chris Coyier https://github.com/chriscoyier
• Wes Bos https://github.com/wesbos
• Miriam Suzanne https://github.com/mirisuzanne
• Sara Soueidan https://github.com/SaraSoueidan
• Amelia Bellamy-Royds https://github.com/AmeliaBR

Forms with CSS Grid

• Using CSS Grid and Box Alignment properties to build form layouts (Nov, 2018) https://medium.com/the-andela-way/using-css-grid-and-box-alignment-properties-to-build-form-layouts-b5f7ade6e73d
• The Benefits of Using CSS Grid for Web Form Layout (Aug, 2018) https://www.sitepoint.com/css-grid-web-form-layout/
• Creating a simple form with CSS Grid (Oct, 2018) https://zellwk.com/blog/simple-form-with-css-grid/
• Laying out Forms using Subgrid https://www.youtube.com/watch?v=gmQlK3kRft4

Courses

• Rachel Andrew - Learn Grid Layout https://gridbyexample.com/video/
• Wes Bos - CSS Grid https://cssgrid.io/
• CSS Grid Course (FreeCodeCamp) https://www.youtube.com/watch?v=t6CBKf8K_Ac

Tutorials

• How to Efficiently Master the CSS Grid — in a Jiffy https://medium.com/flexbox-and-grids/how-to-efficiently-master-the-css-grid-in-a-jiffy-585d0c213577
• CSS Variables With Inline Styles https://ishadeed.com/article/css-variables-inline-styles/
• Super-Powered Grid Components with CSS Custom Properties https://css-tricks.com/super-power-grid-components-with-css-custom-properties/
• Flexbox vs. CSS grid - Webflow layout tutorial https://www.youtube.com/watch?v=MdPYenT89o4
• CSS Grid Application Layout in Production https://techblog.commercetools.com/gss-grid-application-layout-in-production-f60c65a05cfa
• Learn CSS Grid in 5 Minutes https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228
• A Beginner's Tutorial to the CSS Grid (By Example!) https://www.youtube.com/watch?time_continue=8&v=xXKp3b1YL-U
• Diagramaciones increíblemente fáciles con CSS Grid (Jen Simmons) https://www.youtube.com/watch?v=tFKrK4eAiUQ

Articles & Keynotes

• Hello, Subgrid! - Smashing Meets (19th May 2020 - Rachel Andrew) https://vimeo.com/422929734
• Progressing Our Layouts (Jen Simmons) http://jensimmons.com/presentation/progressing-our-layouts
• CSS Grid Application Layout in Production https://techblog.commercetools.com/gss-grid-application-layout-in-production-f60c65a05cfa
• CSS Grid layout: multiply & conquer — or how to actually design using The Grid https://medium.freecodecamp.org/css-grid-layout-multiply-conquer-or-how-to-actually-design-using-the-grid-745dfc51e114
• How to quickly prototype apps with CSS Grid and CSS Variables https://medium.freecodecamp.org/how-to-quickly-prototype-apps-with-css-grid-and-css-variables-8d3d96d68eaa
• How I stopped using Bootstrap’s layout thanks to CSS Grid https://blog.theodo.fr/2018/03/stop-using-bootstrap-layout-thanks-to-css-grid/
• CSS Grid: One Layout, Multiple Ways https://css-tricks.com/css-grid-one-layout-multiple-ways/
• Using CSS Grid to build a page layout with a sticky header and footer https://www.bitovi.com/blog/using-css-grid-to-build-a-page-layout
• A Complete Guide to Grid https://css-tricks.com/snippets/css/complete-guide-grid/
• CSS Grid — The Swiss Army Knife For Website and Application Layouts https://medium.com/@js_tut/css-grid-the-swiss-army-knife-for-cutting-website-and-application-layouts-c1bd7a6b4e56
• The 100% correct way to do CSS breakpoints (nov, 2016) https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

Experiment Ideas - Recreate app layouts with CSS Grid

• Netflix (Movies)
• Spotify (Music)
• Frame.io (Video)
• Youtube (Videos)
• Gmail (Mail)
• Pinterest (Gallery)
• Google (Search)
• Facebook (Social)
• Instagram (Photos)
• Twitter
• Twitch
• Asana (Tasks)