{"id":268,"date":"2019-09-11T11:47:45","date_gmt":"2019-09-11T11:47:45","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/?p=268"},"modified":"2019-10-31T13:49:58","modified_gmt":"2019-10-31T13:49:58","slug":"css-grid","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/11\/css-grid\/","title":{"rendered":"CSS Grid"},"content":{"rendered":"\n<p>CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started to exploring more complex layouts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Getting Started Guides<\/h3>\n\n\n\n<p>These guides are designed to help you learn Grid. They all teach the basic ideas but with different approaches. Look through them and see which one fits your learning style the best.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Rachel Andrew\u2019s <em>Grid by Example<\/em> <a href=\"https:\/\/gridbyexample.com\/learn\/\">https:\/\/gridbyexample.com\/learn\/<\/a>  <\/li><li><a href=\"https:\/\/learncssgrid.com\/\">https:\/\/learncssgrid.com\/<\/a><\/li><li><a href=\"https:\/\/testdriven.io\/blog\/css-grid\/\">https:\/\/testdriven.io\/blog\/css-grid\/<\/a><\/li><li><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Reference Guides and Cheatsheets<\/h3>\n\n\n\n<p>These help show all of the grid properties, usually with examples.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>CSS Tricks&#8217; Complete Guide to CSS Grid: <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/<\/a><\/li><li>Cheatsheet: <a href=\"http:\/\/grid.malven.co\/\">http:\/\/grid.malven.co\/<\/a><\/li><li>Mozilla Developer\u2019s Network <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">Reference Documentation<\/a><\/li><li>My Examples: <a href=\"https:\/\/profstein.github.io\/css-grid-basic-examples\/\">https:\/\/profstein.github.io\/css-grid-basic-examples\/<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Video Tutorials and Examples<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.youtube.com\/layoutland\/\">https:\/\/www.youtube.com\/layoutland\/<\/a><\/li><li><a href=\"https:\/\/gridbyexample.com\/video\/\">https:\/\/gridbyexample.com\/video\/<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Places to try it out<\/h2>\n\n\n\n<p>These are sites where you can experiment right on the web page. Make sure your browser supports CSS Grid.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>CodePen: <a href=\"https:\/\/codepen.io\/search\/pens?q=css+grid\">https:\/\/codepen.io\/search\/pens?q=css+grid<\/a><\/li><li>CSS Grid Playground: <a href=\"https:\/\/www.cssgridplayground.com\/\">https:\/\/www.cssgridplayground.com\/<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Example Sites<\/h2>\n\n\n\n<p>Collections of examples<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/cssgrid.design\/\">https:\/\/cssgrid.design\/<\/a><\/li><li><a href=\"https:\/\/speckyboy.com\/creative-examples-css-grid-layouts\/\">https:\/\/speckyboy.com\/creative-examples-css-grid-layouts\/<\/a><\/li><\/ul>\n\n\n\n<p>Demos: these are examples that aren&#8217;t actual sites in production<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/gridbyexample.com\/examples\/\">https:\/\/gridbyexample.com\/examples\/<\/a><\/li><li><a href=\"https:\/\/gridbyexample.com\/patterns\/\">https:\/\/gridbyexample.com\/patterns\/<\/a><\/li><li><a href=\"https:\/\/labs.jensimmons.com\/2017\/workshop\/\">ttps:\/\/labs.jensimmons.com\/2017\/workshop\/<\/a><\/li><li><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started to exploring more complex layouts. Getting Started Guides These guides are designed to help you learn Grid. They all teach the basic ideas but with [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[10,15,7],"tags":[44,92,93],"class_list":{"0":"post-268","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css","8":"category-layout","9":"category-resource","10":"tag-css-grid","11":"tag-guides","12":"tag-reference","13":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":6,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":618,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/268\/revisions\/618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media\/279"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}