{"id":395500,"date":"2026-06-04T08:09:44","date_gmt":"2026-06-04T14:09:44","guid":{"rendered":"https:\/\/css-tricks.com\/?p=395500"},"modified":"2026-06-04T08:09:47","modified_gmt":"2026-06-04T14:09:47","slug":"quick-hit-144","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/quick-hit-144\/","title":{"rendered":"Quick Hit #144"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.chrome.com\/release-notes\/149\" rel=\"noopener\">Chrome 149<\/a> becomes the first to implement <a href=\"https:\/\/developer.chrome.com\/blog\/gap-decorations-stable\" rel=\"noopener\">CSS Gap Decorations<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chrome 149 becomes the first to implement CSS Gap Decorations.<\/p>\n","protected":false},"author":288677,"featured_media":300990,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19079],"tags":[1021,478,532,14893,686,1648],"class_list":["post-395500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-quick-hits","tag-chrome","tag-css","tag-flexbox","tag-gap","tag-grid","tag-multi-column-layout"],"acf":{"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":392268,"url":"https:\/\/css-tricks.com\/quick-hit-97\/","url_meta":{"origin":395500,"position":0},"title":"Quick Hit #97","author":"Daniel Schwarz","date":"February 11, 2026","format":false,"excerpt":"Chrome 145 becomes the first to ship customizable <select>, as well as column-wrap and column-height for better multicol layouts.","rel":"","context":"In &quot;Quick Hits&quot;","block_context":{"text":"Quick Hits","link":"https:\/\/css-tricks.com\/category\/quick-hits\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":387471,"url":"https:\/\/css-tricks.com\/the-gap-strikes-back-now-stylable\/","url_meta":{"origin":395500,"position":1},"title":"The Gap Strikes Back: Now Stylable","author":"Patrick Brosset","date":"July 1, 2025","format":false,"excerpt":"Styling the space between layout items \u2014 the gap \u2014 has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"A two-by-three grid of light gray boxes with spacing between. Behind them is a backdrop with the word gap repeated nine times.","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,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/gap.png?fit=1200%2C631&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/gap.png?fit=1200%2C631&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/gap.png?fit=1200%2C631&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/gap.png?fit=1200%2C631&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":392361,"url":"https:\/\/css-tricks.com\/css-multi-column-layout-wrapping-features\/","url_meta":{"origin":395500,"position":2},"title":"Looking at New CSS Multi-Column Layout Wrapping Features","author":"Abhishek Pratap Singh","date":"April 6, 2026","format":false,"excerpt":"Chrome 145 introduces the column-height and column-wrap properties, enabling us to wrap the additional content into a new row below, creating a vertical scroll instead of a horizontal scroll.","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"The Chrome logo sitting on top of a grid layout of boxes.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/chrome-layout.webp?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/chrome-layout.webp?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/chrome-layout.webp?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/chrome-layout.webp?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/chrome-layout.webp?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":351481,"url":"https:\/\/css-tricks.com\/minding-the-gap\/","url_meta":{"origin":395500,"position":3},"title":"Minding the &#8220;gap&#8221;","author":"Patrick Brosset","date":"September 16, 2021","format":false,"excerpt":"Read an updated article with an approach that uses modern CSS features. 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\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"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,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/z8fc2xmA.jpeg?fit=1200%2C1003&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/z8fc2xmA.jpeg?fit=1200%2C1003&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/z8fc2xmA.jpeg?fit=1200%2C1003&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/z8fc2xmA.jpeg?fit=1200%2C1003&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":391561,"url":"https:\/\/css-tricks.com\/quick-hit-85\/","url_meta":{"origin":395500,"position":4},"title":"Quick Hit #85","author":"Daniel Schwarz","date":"January 16, 2026","format":false,"excerpt":"Chrome 144 becomes the first to support ::search-text, a pseudo-element for selecting find-in-page text.","rel":"","context":"In &quot;Quick Hits&quot;","block_context":{"text":"Quick Hits","link":"https:\/\/css-tricks.com\/category\/quick-hits\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":308403,"url":"https:\/\/css-tricks.com\/exciting-things-on-the-horizon-for-css-layout\/","url_meta":{"origin":395500,"position":5},"title":"Exciting Things on the Horizon For CSS Layout","author":"Chris Coyier","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 &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"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,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395500","targetHints":{"allow":["GET"]}}],"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\/288677"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=395500"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395500\/revisions"}],"predecessor-version":[{"id":395501,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395500\/revisions\/395501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=395500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=395500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=395500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}