{"id":204785,"date":"2015-07-08T15:02:31","date_gmt":"2015-07-08T22:02:31","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=204785"},"modified":"2015-07-08T15:03:43","modified_gmt":"2015-07-08T22:03:43","slug":"140-exploring-css-layout-techniques-while-trying-to-get-a-subtitle-to-wrap","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/140-exploring-css-layout-techniques-while-trying-to-get-a-subtitle-to-wrap\/","title":{"rendered":"#140: Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap"},"content":{"rendered":"<p>This is the video screencast version of a blog post I did not long ago: <a href=\"https:\/\/css-tricks.com\/useful-flexbox-technique-alignment-shifting-wrapping\/\">Useful Flexbox Technique: Alignment Shifting Wrapping<\/a>. I was at a <a href=\"http:\/\/blog.codepen.io\/meetups\/\" rel=\"noopener\">CodePen Meetup<\/a> and used it as a quick show-and-tell demo and it was kinda fun so, you know, RECYCLING.<\/p>\n<p>We have a title\/subtitle situation with a very specific layout in mind that we want to behave a certain way responsively. We eventually get there with Flexbox, but we explore lots of CSS positioning stuff along the way for fun.<\/p>\n<p data-height=\"610\" style=\"height: 610px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"doVXLV\" data-default-tab=\"result\" data-user=\"chriscoyier\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/doVXLV\/\" rel=\"noopener\">Wrapping Same-Line Titles<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the video screencast version of a blog post I did not long ago: Useful Flexbox Technique: Alignment Shifting Wrapping. I was at a CodePen Meetup and used it as a quick show-and-tell demo and it was kinda fun so, you know, RECYCLING. We have a title\/subtitle situation with a very specific layout in [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":318980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/gap\/","url_meta":{"origin":204785,"position":0},"title":"gap","date":"August 13, 2020","format":false,"excerpt":"The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts. \/* Grid layout *\/ .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image.jpeg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":321902,"url":"https:\/\/css-tricks.com\/almanac\/properties\/r\/row-gap\/","url_meta":{"origin":204785,"position":1},"title":"row-gap","date":"September 28, 2020","format":false,"excerpt":"The row-gap property in CSS sets space (formally called \"gutters\") between rows in CSS Grid, Flexbox, and CSS Columns layouts. You can think of row-gap as the \"next generation\" or successor of grid-row-gap which was originally defined in the CSS Grid Layout specification. In an effort to extend that feature\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324816,"url":"https:\/\/css-tricks.com\/video-screencasts\/196-learning-grid-flexbox-with-kyle-simpson\/","url_meta":{"origin":204785,"position":2},"title":"#196: Learning Grid &#038; Flexbox with Kyle Simpson","date":"October 30, 2020","format":false,"excerpt":"Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn't as up-to-date on modern CSS layout tools like flexbox and grid. We didn't go from 0 to 100 here, but we did have a great chat about modern layout while live\u2026","rel":"","context":"In \"flexbox\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/thumb-grid.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":321933,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-gap\/","url_meta":{"origin":204785,"position":3},"title":"column-gap","date":"September 28, 2020","format":false,"excerpt":"The CSS column-gap property sets space (also called \"gutters\") between between columns in CSS Grid, Flexbox, and CSS Columns layouts. Context If you're wondering why we have a column-gap property when there's already a grid-column-gap one, you're not alone! In fact, column-gap effectively replaces grid-column-gap. By dropping the grid- prefix,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":204785,"position":4},"title":"place-self","date":"March 2, 2021","format":false,"excerpt":"The place-self property in CSS is shorthand for the align-self and justify-self properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-self and justify-self (CSS Grid only) are values that align an individual item in the block and inline directions. .element { place-self: center start;\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326605,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-items\/","url_meta":{"origin":204785,"position":5},"title":"justify-items","date":"December 2, 2020","format":false,"excerpt":"The justify-items property is a sub-property of the CSS Box Alignment Module which basically controls the alignment of grid items within their scope. .element { justify-items: center; } justify-items aligns grid items along the row (inline) axis. Specifically, this property allows you to set alignment for items inside a grid\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/204785"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=204785"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/204785\/revisions"}],"predecessor-version":[{"id":204802,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/204785\/revisions\/204802"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=204785"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=204785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}