{"id":248714,"date":"2016-12-06T12:26:18","date_gmt":"2016-12-06T19:26:18","guid":{"rendered":"http:\/\/css-tricks.com\/?p=248714"},"modified":"2016-12-06T12:26:18","modified_gmt":"2016-12-06T19:26:18","slug":"css-grid","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-grid\/","title":{"rendered":"CSS Grid!"},"content":{"rendered":"

Eric Meyer, talking to himself:<\/p>\n

\n

How long until I can actually use Grid, then? Two or three years?<\/strong><\/p>\n

March 2017. So about four months from now.<\/p>\n<\/blockquote>\n

\n

Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea.<\/p>\n

<\/strong><\/p>\n

We agreed table markup<\/em> for layout was a bad idea<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Eric Meyer, talking to himself: How long until I can actually use Grid, then? Two or three years? March 2017. So about four months from now. Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea. We agreed table markup for layout was a bad idea<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[686],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":319408,"url":"https:\/\/css-tricks.com\/to-grid-or-not-to-grid\/","url_meta":{"origin":248714,"position":0},"title":"To grid or not to grid","date":"August 20, 2020","format":false,"excerpt":"Sarah Higley does accessibility work and finds that \"tables and grids are over-represented in accessibility bugs.\" The drum has been banged a million times: don't use a for layout. But what goes around comes around. What's the the #1 item in a list of \"some of the ways tables\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/table-grid-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305295,"url":"https:\/\/css-tricks.com\/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs\/","url_meta":{"origin":248714,"position":1},"title":"4 CSS Grid Properties (and One Value) for Most of Your Layout Needs","date":"March 30, 2020","format":false,"excerpt":"CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid\u2019s properties with layout examples. What we\u2019re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/css-grid-properties.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308403,"url":"https:\/\/css-tricks.com\/exciting-things-on-the-horizon-for-css-layout\/","url_meta":{"origin":248714,"position":2},"title":"Exciting Things on the Horizon For CSS Layout","date":"May 7, 2020","format":false,"excerpt":"Michelle Barker notes that it's been a heck of a week for us CSS layout nerds. Firefox has long had the best DevTools for CSS Grid, but Chrome is about to catch up and go one bit better by visualizing grid line numbers and names.Firefox supports gap for display: flex,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324289,"url":"https:\/\/css-tricks.com\/in-defense-of-tables-and-floats-in-modern-day-development\/","url_meta":{"origin":248714,"position":3},"title":"In Defense of Tables and Floats in Modern Day Development","date":"October 30, 2020","format":false,"excerpt":"Twenty-plus years ago, tables were the main way web pages were created in HTML. It gave web builders consistent control of constructing pages with some \u201cdesign.\u201d No longer did sites only have to be top-to-bottom in a linear manner \u2014 they could be set up with columns that align left-to-right\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/table-on-clouds.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":293283,"url":"https:\/\/css-tricks.com\/bringing-css-grid-to-wordpress-layouts\/","url_meta":{"origin":248714,"position":4},"title":"Bringing CSS Grid to WordPress Layouts","date":"July 31, 2019","format":false,"excerpt":"December 6th, 2018 was a special date for WordPress: it marked the release of version 5.0 of the software that, to this day, powers more than one-third of the web. In the past, people working on the platform pointed out that there has never been any special meaning to version\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/wp-grid.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372634,"url":"https:\/\/css-tricks.com\/using-grid-named-areas-to-visualize-and-reference-your-layout\/","url_meta":{"origin":248714,"position":5},"title":"Using Grid Named Areas to Visualize (and Reference) Your Layout","date":"August 26, 2022","format":false,"excerpt":"Whenever we build simple or complex layouts using CSS Grid, we're usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them). Positioning items with line numbers is a fine way to lay\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/Modern-Desktop-Breakpoint.jpg?fit=1200%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/248714"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=248714"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/248714\/revisions"}],"predecessor-version":[{"id":248715,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/248714\/revisions\/248715"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=248714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=248714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=248714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}