{"id":641,"date":"2021-06-07T13:43:00","date_gmt":"2021-06-07T11:43:00","guid":{"rendered":"http:\/\/strawberrycode.com\/blog\/?p=641"},"modified":"2021-06-07T13:43:02","modified_gmt":"2021-06-07T11:43:02","slug":"10-css-single-line-layouts","status":"publish","type":"post","link":"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/","title":{"rendered":"CSS Superpowers: 10 single-line Layouts"},"content":{"rendered":"\n<p>I recently came across an extremely useful video about CSS tips and tricks made by <a href=\"https:\/\/twitter.com\/una\" target=\"_blank\" rel=\"noreferrer noopener\">Una Kravets<\/a> on the <a href=\"https:\/\/www.youtube.com\/channel\/UCnUYZLuoy1rq1aVMwx4aTzw\" target=\"_blank\" rel=\"noreferrer noopener\">Google Chrome Developers<\/a> Youtube channel: <a href=\"https:\/\/www.youtube.com\/watch?v=qm0IfG1GyZU\" target=\"_blank\" rel=\"noreferrer noopener\">10 modern layouts in 1 line of CSS<\/a>. I think the title speaks by itself. Let&#8217;s see how to create 10 single-line layouts!<\/p>\n\n\n\n<p>First and foremost, have a look at the video, it is very detailed and nicely explained ;)<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"10 modern layouts in 1 line of CSS\" width=\"604\" height=\"340\" src=\"https:\/\/www.youtube.com\/embed\/qm0IfG1GyZU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If you want to give it a try, go to the Glitch demo page: <a href=\"https:\/\/1linelayouts.glitch.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">1linelayouts.glitch.me<\/a><\/p>\n\n\n\n<p>And if you are lazy, here is a quick recap: <\/p>\n\n\n\n<h2>1. Super Centered<\/h2>\n\n\n\n<p>How to (finally) center an element both horizontally and vertically.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">place-items: center<\/pre>\n\n\n\n<h2>2. The Deconstructed Pancake<\/h2>\n\n\n\n<p>A responsive layout to display elements horizontally on wide screens and stack them up nicely on mobile.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">flex: 0 1 &lt;baseWidth><\/pre>\n\n\n\n<h2>3. Sidebar Says<\/h2>\n\n\n\n<p>A 2-columns template with a column having min and max width depending on your screen width.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">grid-template-columns: minmax(&lt;min>, &lt;max>) ...<\/pre>\n\n\n\n<h2>4. Pancake Stack<\/h2>\n\n\n\n<p>A vertical layout with adapting height for header and footer.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">grid-template-rows: auto 1fr auto<\/pre>\n\n\n\n<h2>5. Classic Holy Grail Layout<\/h2>\n\n\n\n<p>A full layout, with adpating height for header and footer plus adapting width for left and right sidebars.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">grid-template: auto 1fr auto \/ auto 1fr auto<\/pre>\n\n\n\n<h2>6. 12-Span Grid<\/h2>\n\n\n\n<p>The classic 12 columns template, without Bootstrap ;)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">grid-template-columns: repeat(12, 1fr)<\/pre>\n\n\n\n<h2>7. RAM (Repeat, Auto, Minmax)<\/h2>\n\n\n\n<p>A bit similar to #2, but with a different behaviour, especially when using auto-fit or auto-fill.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">grid-template-columns: repeat(auto-fit, minmax(&lt;base>, 1fr))<\/pre>\n\n\n\n<h2>8. Line Up<\/h2>\n\n\n\n<p>For me, the most elegant solution to align elements with different content sizes.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">justify-content: space-between<\/pre>\n\n\n\n<h2>9. Clamping My Style<\/h2>\n\n\n\n<p>How to replace 3 media queries by 1 line of code to set different behaviours depending on the screen size.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">clamp(&lt;min>, &lt;actual>, &lt;max>)<\/pre>\n\n\n\n<h2>10. Respect for Aspect<\/h2>\n\n\n\n<p>No more calculations or set width and auto height to respect the element aspect ratio.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">aspect-ratio: &lt;width> \/ &lt;height><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>I hope you found it useful, feel free to\u00a0<a href=\"https:\/\/www.buymeacoffee.com\/strawberrycode\" target=\"_blank\" rel=\"noreferrer noopener\">buy me a coffee (or tea)<\/a>\u00a0to support the blog\u00a0:)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently came across an extremely useful video about CSS tips and tricks made by Una Kravets on the Google Chrome Developers Youtube channel: 10 modern layouts in 1 line of CSS. I think the title speaks by itself. Let&#8217;s see how to create 10 single-line layouts! First and foremost, have a look at the video, it is very detailed and nicely explained ;) If you want to give it a try, go to the Glitch demo page: 1linelayouts.glitch.me And if you are lazy, here is a quick recap: 1. Super Centered How to (finally) center an element both horizontally &hellip; <a href=\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">CSS Superpowers: 10 single-line Layouts<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":646,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[115],"tags":[118,117,116],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Superpowers: 10 single-line Layouts - StrawberryCode<\/title>\n<meta name=\"description\" content=\"Create reliable layouts and templates with these 10 single-line CSS tips and tricks, and unlock your CSS superpowers!\" \/>\n<link rel=\"canonical\" href=\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Superpowers: 10 single-line Layouts - StrawberryCode\" \/>\n<meta property=\"og:description\" content=\"Create reliable layouts and templates with these 10 single-line CSS tips and tricks, and unlock your CSS superpowers!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/\" \/>\n<meta property=\"og:site_name\" content=\"StrawberryCode\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-07T11:43:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-07T11:43:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/css-superpowers-single-line-layout.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1580\" \/>\n\t<meta property=\"og:image:height\" content=\"884\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/#website\",\"url\":\"https:\/\/strawberrycode.com\/blog\/\",\"name\":\"StrawberryCode\",\"description\":\"Fruit for Thought\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/strawberrycode.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/css-superpowers-single-line-layout.png\",\"contentUrl\":\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/css-superpowers-single-line-layout.png\",\"width\":1580,\"height\":884},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/#webpage\",\"url\":\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/\",\"name\":\"CSS Superpowers: 10 single-line Layouts - StrawberryCode\",\"isPartOf\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/#primaryimage\"},\"datePublished\":\"2021-06-07T11:43:00+00:00\",\"dateModified\":\"2021-06-07T11:43:02+00:00\",\"author\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/#\/schema\/person\/c328d959959928f47281d7a0ec779e2a\"},\"description\":\"Create reliable layouts and templates with these 10 single-line CSS tips and tricks, and unlock your CSS superpowers!\",\"breadcrumb\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/\",\"url\":\"https:\/\/strawberrycode.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/\",\"url\":\"https:\/\/strawberrycode.com\/blog\/10-css-single-line-layouts\/\",\"name\":\"CSS Superpowers: 10 single-line Layouts\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/#\/schema\/person\/c328d959959928f47281d7a0ec779e2a\",\"name\":\"StrawberryCode\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/641"}],"collection":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/comments?post=641"}],"version-history":[{"count":3,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/641\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/641\/revisions\/644"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/media\/646"}],"wp:attachment":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/media?parent=641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/categories?post=641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/tags?post=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}