{"id":300238,"date":"2019-12-13T13:47:57","date_gmt":"2019-12-13T20:47:57","guid":{"rendered":"https:\/\/css-tricks.com\/?p=300238"},"modified":"2019-12-13T13:47:57","modified_gmt":"2019-12-13T20:47:57","slug":"adam-argyles-2020-css-predictions","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/adam-argyles-2020-css-predictions\/","title":{"rendered":"Adam Argyle’s 2020 CSS Predictions"},"content":{"rendered":"

I think Adam’s first prediction is his boldest, even beyond his Hail Mary prediction. CSS grid<\/a> is awesome and gap<\/code> is perhaps one of its best qualities, but gap<\/code> superseding<\/em> spacing things out in other ways (e.g. margin) is a bold prediction indeed, especially with Firefox being the only browser supporting it in flexbox.<\/p>\n","protected":false},"excerpt":{"rendered":"

I think Adam’s first prediction is his boldest, even beyond his Hail Mary prediction. CSS grid is awesome and gap is perhaps one of its best qualities, but gap superseding spacing things out in other ways (e.g. margin) is a bold prediction indeed, especially with Firefox being the only browser supporting it in flexbox.<\/p>\n","protected":false},"author":3,"featured_media":300260,"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":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\/2019\/12\/argyle-2020-predictions-header.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":305764,"url":"https:\/\/css-tricks.com\/max-stoibers-strong-opinion-about-margins\/","url_meta":{"origin":300238,"position":0},"title":"Max Stoiber’s Strong Opinion About Margins","date":"March 31, 2020","format":false,"excerpt":"Going with that title instead of the classic developer clickbait version Max used. ;) We should ban margin from our components. Don't use margin?! This thing I've been doing my entire career and don't have any particular problems with?! Well, that's not exactly Max's point. The point is that any\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/margins.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363541,"url":"https:\/\/css-tricks.com\/an-auto-filling-css-grid-with-max-columns\/","url_meta":{"origin":300238,"position":1},"title":"An Auto-Filling CSS Grid With Max Columns of a Minimum Size","date":"February 16, 2022","format":false,"excerpt":"Within Drupal 10 core, we\u2019re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world. The requirements are: The user specifies a maximum number of columns. This is the auto-filling grid\u2019s \u201cnatural\u201d state.If a grid cell goes under a user-specified width, the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/grid-lightbulb.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336967,"url":"https:\/\/css-tricks.com\/gaps-gasp\/","url_meta":{"origin":300238,"position":2},"title":"Gaps? Gasp!","date":"April 6, 2021","format":false,"excerpt":"At first, there were flexboxes (the children of a display: flex container). If you wanted them to be visually separate, you had to use content justification (i.e. justify-content: space-between), margin trickery, or sometimes, both. Then along came grids (a display: grid container), and grids could have not-margin not-trickeried minimum gaps\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/gap.png?fit=1200%2C631&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":310839,"url":"https:\/\/css-tricks.com\/flexbox-like-just-put-elements-in-a-row-with-css-grid\/","url_meta":{"origin":300238,"position":3},"title":"Flexbox-like “just put elements in a row” with CSS grid","date":"May 21, 2020","format":false,"excerpt":"It occurred to me while we were talking about flexbox and gap that one reason we sometimes reach for flexbox is to chuck some boxes in a row and space them out a little. My brain still reaches for flexbox in that situation, and with gap, it probably will continue\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/grid-auto-flow-column.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351481,"url":"https:\/\/css-tricks.com\/minding-the-gap\/","url_meta":{"origin":300238,"position":4},"title":"Minding the “gap”","date":"September 16, 2021","format":false,"excerpt":"You might already know about the CSS gap property. It isn\u2019t exactly new, but it did gain an important new ability last year: it now works in Flexbox in addition to CSS Grid. That, and the fact that I believe the property is more complicated than it appears, made me\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/z8fc2xmA.jpeg?fit=1200%2C1003&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":310085,"url":"https:\/\/css-tricks.com\/chromium-lands-flexbox-gap\/","url_meta":{"origin":300238,"position":5},"title":"Chromium lands Flexbox gap","date":"May 8, 2020","format":false,"excerpt":"I mentioned this the other day via Michelle Barker's coverage, but here I'll link to the official announcement. The main thing is that we'll be getting gap with flexbox, which means: .flex-parent { display: flex; gap: 1rem; } .flex-child { flex: 1; } That's excellent, as putting space in between\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/bricks-with-gaps.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/argyle-2020-predictions-header.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300238"}],"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=300238"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300238\/revisions"}],"predecessor-version":[{"id":300256,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300238\/revisions\/300256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300260"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=300238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=300238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=300238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}