{"id":317548,"date":"2020-07-23T13:15:46","date_gmt":"2020-07-23T20:15:46","guid":{"rendered":"https:\/\/css-tricks.com\/?p=317548"},"modified":"2020-07-23T13:15:47","modified_gmt":"2020-07-23T20:15:47","slug":"accordion-rows-in-css-grid","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/accordion-rows-in-css-grid\/","title":{"rendered":"Accordion Rows in CSS Grid"},"content":{"rendered":"\n

I’d bet grid-template-columns<\/code> is used about 10\u00d7 more than grid-template-rows<\/code>, but maybe everyone has just been missing out. Eric Meyer<\/a> chucks a bunch of row lines onto his main site layout grid like this:<\/p>\n\n\n\n

grid-template-rows: repeat(7, min-content) 1fr repeat(3, min-content);<\/code><\/pre>\n\n\n\n
That way, if you need to use them they are they for you:<\/p>\n\n\n\n
I like<\/em> this pattern. It feels good to me, having two sets of rows where the individual rows accordion open to accept content when needed, and collapse to zero height when not, with a \u201cblank\u201d row in between the sets that pushes them apart. It\u2019s flexible, and even allows me to add more rows to the sets without having to rewrite all my layout styles.<\/p><\/blockquote>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
I’d bet grid-template-columns is used about 10\u00d7 more than grid-template-rows, but maybe everyone has just been missing out. Eric Meyer chucks a bunch of row lines onto his main site layout grid like this: That way, if you need to use them they are they for you: I like this pattern. It feels good to me, having […]<\/p>\n","protected":false},"author":3,"featured_media":317552,"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,1556,1557],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/fig06.png?fit=860%2C1156&ssl=1","jetpack-related-posts":[{"id":257517,"url":"https:\/\/css-tricks.com\/difference-explicit-implicit-grids\/","url_meta":{"origin":317548,"position":0},"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 "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":269524,"url":"https:\/\/css-tricks.com\/another-collection-of-interesting-facts-about-css-grid\/","url_meta":{"origin":317548,"position":1},"title":"Another Collection of Interesting Facts About CSS Grid","date":"April 13, 2018","format":false,"excerpt":"Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I worked on another workshop and I've learned some more exciting facts about the layout spec we all so love. Of course, I'm not going to keep my knowledge to myself.\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":326473,"url":"https:\/\/css-tricks.com\/native-css-masonry-layout-in-css-grid\/","url_meta":{"origin":317548,"position":2},"title":"Native CSS Masonry Layout In CSS Grid","date":"November 30, 2020","format":false,"excerpt":"Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pure-css-masonry.jpg?fit=1200%2C825&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325791,"url":"https:\/\/css-tricks.com\/grid-auto-flow-css-grid-flex-direction-flexbox\/","url_meta":{"origin":317548,"position":3},"title":"grid-auto-flow : CSS Grid :: flex-direction : Flexbox","date":"November 18, 2020","format":false,"excerpt":"When setting a parent element to display: flex, its child elements align left-to-right like this: CodePen Embed Fallback Now, one of the neat things we can do with flexbox is change the direction so that child elements are stacked vertically on top of each other in a column. We can\u2026","rel":"","context":"In "Article"","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":317548,"position":4},"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":[]},{"id":305295,"url":"https:\/\/css-tricks.com\/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs\/","url_meta":{"origin":317548,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/317548"}],"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=317548"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/317548\/revisions"}],"predecessor-version":[{"id":317826,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/317548\/revisions\/317826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/317552"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=317548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=317548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=317548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}