{"id":307045,"date":"2020-04-21T07:43:13","date_gmt":"2020-04-21T14:43:13","guid":{"rendered":"https:\/\/css-tricks.com\/?p=307045"},"modified":"2020-04-21T07:43:14","modified_gmt":"2020-04-21T14:43:14","slug":"constrained-css-grids-without-max-width","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/constrained-css-grids-without-max-width\/","title":{"rendered":"Constrained CSS grids without `max-width`"},"content":{"rendered":"\n<p>Ain&#8217;t nothing wrong with <code>max-width<\/code>, but Ethan <a href=\"https:\/\/ethanmarcotte.com\/wrote\/css-grid-without-max-width\/\" rel=\"noopener\">makes a point<\/a> in the last sentence:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Rather than simply defaulting to&nbsp;<code>max-width<\/code>&nbsp;as a constraint, I can&nbsp;<em>use<\/em>&nbsp;the empty space around my design, and treat it as a layout tool.<\/p><\/blockquote>\n\n\n\n<p>If the space &#8220;around&#8221; your grid is actually part of the grid, it&#8217;s easier to use. Maybe you&#8217;d decide to scootch some author information up there after all, or show an ad, or who knows what. It will be more robust if you do it within the established grid.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ain&#8217;t nothing wrong with max-width, but Ethan makes a point in the last sentence: Rather than simply defaulting to&nbsp;max-width&nbsp;as a constraint, I can&nbsp;use&nbsp;the empty space around my design, and treat it as a layout tool. If the space &#8220;around&#8221; your grid is actually part of the grid, it&#8217;s easier to use. Maybe you&#8217;d decide to [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":307067,"comment_status":"closed","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":true,"jetpack_social_options":[]},"categories":[17],"tags":[686],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/ethan-marcotte-fox.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307045"}],"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=307045"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307045\/revisions"}],"predecessor-version":[{"id":307068,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307045\/revisions\/307068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/307067"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=307045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=307045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=307045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}