LoremPixel<\/a>. For the demo we grabbed photos in random sizes with jQuery:<\/p>\nfunction getRandomSize(min, max) {\r\n return Math.round(Math.random() * (max - min) + min);\r\n}\r\n\r\nfor (var i = 0; i < 25; i++) {\r\n var width = getRandomSize(200, 400);\r\n var height = getRandomSize(200, 400);\r\n $('#photos').append('<img src=\"\/\/www.lorempixel.com\/'+width+'\/'+height+'\/cats\" alt=\"pretty kitty\">');\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don’t care if they are resized, but they should maintain their aspect ratio.<\/p>\n","protected":false},"author":3,"featured_media":0,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1382,686,586],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":315873,"url":"https:\/\/css-tricks.com\/how-to-guide-for-creating-edge-to-edge-color-bars-that-work-with-a-grid\/","url_meta":{"origin":13372,"position":0},"title":"How-to guide for creating edge-to-edge color bars that work with a grid","date":"July 1, 2020","format":false,"excerpt":"Hard-stop gradients are one of my favorite CSS tricks. Here, Marcel Moreau combines that idea with CSS grid to solve an issue that's otherwise a pain in the butt. Say you have like a 300px right sidebar on a desktop layout with a unique background color. Easy enough. But then\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-rows.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302363,"url":"https:\/\/css-tricks.com\/full-width-elements-by-using-edge-to-edge-grid\/","url_meta":{"origin":13372,"position":1},"title":"Full-Width Elements By Using Edge-to-Edge Grid","date":"February 6, 2020","format":false,"excerpt":"If you have a limited-width container, say a centered column of text, \"breaking out\" of that to make a full-width element involves trickery. Perhaps the best trick is the one with left relative positioning and a negative left viewport-based margin. While it has its caveats (e.g. requiring hidden overflow on\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/grid-sketch-r3.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317422,"url":"https:\/\/css-tricks.com\/a-lightweight-masonry-solution\/","url_meta":{"origin":13372,"position":2},"title":"A Lightweight Masonry Solution","date":"August 3, 2020","format":false,"excerpt":"Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I've been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/bricks-with-gaps.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":313231,"url":"https:\/\/css-tricks.com\/patternico\/","url_meta":{"origin":13372,"position":3},"title":"Patternico","date":"June 20, 2020","format":false,"excerpt":"I remember searching for tutorials for making seamless patterns in Photoshop\u00b9 all the time back in the day. It's fun to see this little website for building repeating patterns as its one job. It does everything you'd expect: pick a background, drag some decorations onto it and position them (overlapping\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-20-at-6.49.16-AM.png?fit=1200%2C895&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372396,"url":"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-2\/","url_meta":{"origin":13372,"position":4},"title":"CSS Grid and Custom Shapes, Part 2","date":"August 22, 2022","format":false,"excerpt":"Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes. Here's just one of the fantastic grids we made together: CodePen Embed Fallback CSS Grid and Custom Shapes series Part 1Part 2\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/zig-zag-panel.png?fit=1104%2C492&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323307,"url":"https:\/\/css-tricks.com\/full-bleed\/","url_meta":{"origin":13372,"position":5},"title":"Full Bleed","date":"October 15, 2020","format":false,"excerpt":"We've covered techniques before for when you want a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column of text. There are loads of techniques. Perhaps my favorite is this little utility class: .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw;\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/full-bleed-breakout.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13372"}],"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=13372"}],"version-history":[{"count":13,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13372\/revisions"}],"predecessor-version":[{"id":267264,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13372\/revisions\/267264"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=13372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}