{"id":367158,"date":"2022-08-02T06:10:49","date_gmt":"2022-08-02T13:10:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=367158"},"modified":"2022-08-02T06:10:51","modified_gmt":"2022-08-02T13:10:51","slug":"implicit-grids-repeatable-layout-patterns-and-danglers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/implicit-grids-repeatable-layout-patterns-and-danglers\/","title":{"rendered":"Implicit Grids, Repeatable Layout Patterns, and Danglers"},"content":{"rendered":"\n<p><a href=\"https:\/\/daverupert.com\/2022\/07\/solving-the-dangler-conundrum-with-has-and-container-queries\/\" rel=\"noopener\">Dave Rupert with some modern CSS magic<\/a> that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content we throw at it?<\/p>\n\n\n\n<p>The specific situation is when a layout grid expects an even number of items, but is supplied with an odd number instead. We\u2019re left with a \u201cdangling\u201d element at the end that throws off the layout. Sounds like what\u2019s needed is some <a href=\"https:\/\/defensivecss.dev\" rel=\"noopener\">Defensive CSS<\/a> and Dave accomplishes it.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>He reaches for <code>:has()<\/code> to write a nifty selector that sniffs out the last item in a grid that contains an odd number of items:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }<\/code><\/pre>\n\n\n\n<p>Breaking that down:<\/p>\n\n\n\n<ul><li>We have a parent container of <code>.items<\/code>.<\/li><li>If the container <code>:has()<\/code> an <code>.item<\/code> child that is the last of its type,<\/li><li>\u2026and that <code>.item<\/code> happens to be an odd-numbered instance,<\/li><li>\u2026then select the first <code>.item<\/code> element of that type and style it!<\/li><\/ul>\n\n\n\n<p>In this case, that last <code>.item<\/code> can be set to go full-width to prevent holes in the layout.<\/p>\n\n\n\n<p>If\u2026 then\u2026 CSS has conditional logic powers! We&#8217;re only talking about support for Safari TP and Edge\/Chrome Canary at the moment, but that&#8217;s pretty awesome.<\/p>\n\n\n\n<p>As chance has it, Temani Afif recently shared tricks he learned while <a href=\"https:\/\/css-tricks.com\/exploring-css-grids-implicit-grid-and-auto-placement-powers\/\">experimenting with implicit grids<\/a>. By taking advantage of CSS Grid\u2019s auto-placement algorithm, we don\u2019t even have to explicitly declare a fixed number of columns and rows for a grid \u2014 CSS will create them for us if they\u2019re needed!<\/p>\n\n\n\n<p>No, Temani\u2019s techniques aren\u2019t alternative solutions to Dave\u2019s \u201cdangler\u201d dilemma. But combining Temani\u2019s approach to repeatable grid layout patterns with Dave\u2019s defensive CSS use of <code>:has()<\/code>, we get a pretty powerful and complex-looking grid that\u2019s lightweight and capable of handling any number of items while maintaining a balanced, repeatable pattern.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGvogLz\" src=\"\/\/codepen.io\/anon\/embed\/bGvogLz?height=850&amp;theme-id=1&amp;slug-hash=bGvogLz&amp;default-tab=result\" height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGvogLz\" title=\"CodePen Embed bGvogLz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content we throw at it? The specific situation is when a layout grid expects an even number of items, but is supplied with an odd number instead. We\u2019re left [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":366249,"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":"Smooshing together great ideas from @davatron5000 and @ChallengesCSS.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18909,686,19051,867],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/boxes-gap.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":367178,"url":"https:\/\/css-tricks.com\/exploring-css-grids-implicit-grid-and-auto-placement-powers\/","url_meta":{"origin":367158,"position":0},"title":"Exploring CSS Grid\u2019s Implicit Grid and Auto-Placement Powers","date":"August 1, 2022","format":false,"excerpt":"When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define the grid using a combination of grid-template-columns, grid-template-rows, and grid-template-areas. And from there, the next step is to place\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_F4C924AEFDB642C9861B01422787157264225531682D164A8C42B48A83B84E89_1656674978920_image.png?fit=608%2C742&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":256695,"url":"https:\/\/css-tricks.com\/collection-interesting-facts-css-grid-layout\/","url_meta":{"origin":367158,"position":1},"title":"A Collection of Interesting Facts about CSS Grid Layout","date":"July 21, 2017","format":false,"excerpt":"A few weeks ago I held a CSS Grid Layout workshop. Since I'm, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. Have\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257517,"url":"https:\/\/css-tricks.com\/difference-explicit-implicit-grids\/","url_meta":{"origin":367158,"position":2},"title":"The Difference Between Explicit and Implicit Grids","date":"August 10, 2017","format":false,"excerpt":"Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372634,"url":"https:\/\/css-tricks.com\/using-grid-named-areas-to-visualize-and-reference-your-layout\/","url_meta":{"origin":367158,"position":3},"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 &quot;Article&quot;","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":[]},{"id":305295,"url":"https:\/\/css-tricks.com\/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs\/","url_meta":{"origin":367158,"position":4},"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 &quot;Article&quot;","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":314446,"url":"https:\/\/css-tricks.com\/grid-for-layout-flexbox-for-components\/","url_meta":{"origin":367158,"position":5},"title":"Grid for layout, flexbox for components","date":"June 25, 2020","format":false,"excerpt":"When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016: Flexbox is essentially for laying out items in a single dimension \u2013 in a row OR a column. Grid is for layout of items in two\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-vs-flexbox.png?fit=1200%2C592&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367158"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=367158"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367158\/revisions"}],"predecessor-version":[{"id":367317,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367158\/revisions\/367317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/366249"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=367158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=367158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=367158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}