{"id":345582,"date":"2021-07-30T13:07:44","date_gmt":"2021-07-30T20:07:44","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=345582"},"modified":"2021-08-06T14:08:18","modified_gmt":"2021-08-06T21:08:18","slug":"208-a-css-grid-layout-with-pictures-down-one-side-matched-up-with-paragraphs-on-the-other","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/208-a-css-grid-layout-with-pictures-down-one-side-matched-up-with-paragraphs-on-the-other\/","title":{"rendered":"#208: A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other"},"content":{"rendered":"\n<p>This is the video version of <a href=\"https:\/\/css-tricks.com\/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side\/\">a blog post we did<\/a> asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other&nbsp;side?<\/p>\n\n\n\n<p>It&#8217;s a satisfying answer because we can pull this off with simple semantic markup (really just <code>&lt;img&gt;<\/code> and <code>&lt;p&gt;<\/code> over and over) and a few lines of CSS grid. And yet! Of course, we find lots of quirks and things to figure out. <\/p>\n\n\n\n<ul><li>We go through some image best practices (<a href=\"https:\/\/css-tricks.com\/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing\/\">gotta have that<\/a> <code>width<\/code> and <code>height<\/code> attribute).<\/li><li>We look at <a href=\"https:\/\/css-tricks.com\/body-toggle\/\">a clever technique<\/a> for testing layout sizes with a single click<\/li><li>We deal with small screen layouts.<\/li><li>We battle with how we get to keep our nice layout when extra HTML elements &#8220;get in the way.&#8221; For example, if the image and text really should be <code>&lt;figure&gt;<\/code> and <code>&lt;figcaption&gt;<\/code>, that gets tricky because the figure element &#8220;gets in the way&#8221; of the parent grid. We look at solving it with <code>display: contents;<\/code> (possibly a fine solution, but maybe destroys some semantics?) and <code>display: subgrid;<\/code> (the correct solution, but low browser support). And then a technique using both, which seems to fail on us right at the end.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This is the video version of a blog post we did asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other&nbsp;side? It&#8217;s a satisfying answer because we can pull this off with simple semantic markup (really just &lt;img&gt; and &lt;p&gt; over [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":345609,"parent":1283,"menu_order":0,"comment_status":"closed","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":"Video: A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other","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":324816,"url":"https:\/\/css-tricks.com\/video-screencasts\/196-learning-grid-flexbox-with-kyle-simpson\/","url_meta":{"origin":345582,"position":0},"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":318980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/gap\/","url_meta":{"origin":345582,"position":1},"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":345582,"position":2},"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":365866,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-areas\/","url_meta":{"origin":345582,"position":3},"title":"grid-template-areas","date":"May 20, 2022","format":false,"excerpt":"The grid-template-areas CSS property allows you to define and name the cells (or \u201careas\u201d) in a CSS grid container. .grid-container { display: grid; grid-template-areas: \"header header\" \"sidebar main\"; } So, that example above? We get a two-by-two grid where the top row reserves two columns for an area named header.\u2026","rel":"","context":"Similar post","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},"classes":[]},{"id":321933,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-gap\/","url_meta":{"origin":345582,"position":4},"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":374225,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column\/","url_meta":{"origin":345582,"position":5},"title":"grid-column","date":"October 17, 2022","format":false,"excerpt":"The grid-column CSS property is a shorthand that specifies the column grid lines where a grid item starts and ends in a grid layout in one declaration. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item:nth-child(2) { grid-column: 3 \/ 5; \/* Starts on the third column line and ends\u2026","rel":"","context":"Similar post","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},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345582"}],"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=345582"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345582\/revisions"}],"predecessor-version":[{"id":345716,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345582\/revisions\/345716"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/345609"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=345582"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=345582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}