10 modern layouts in 1 line of CSS

00:18 - Thank you for joining me today, I am super excited to get started and talk about some magical lines of CSS that do some serious heavy lifting, and let you build robust modern layouts.

00:28 - Before we dive in to that, there are a couple of key terms that will help you in your styling journeys, and are super good to know about as we walk through these techniques.

00:37 - Most of the items I’m mentioning today are used in conjunction with Grid or Flexbox layout and you can denote those as display: grid or display: flex on the parent element.

00:47 - The first key terms are fr and auto, these are used with grid layouts to denote fractional units of space, that’s fr or automatic space, that’s auto based on the minimum content size of the items within that element.

01:00 - For grid layout we also have the minmax() function, which lets us set a minimum and maximum value with our layout bounds to enable responsive design without media queries.

01:10 - We also have separate min() max() and clamp() functions available in some browsers that bring logic to CSS.

01:17 - The browser determines which value to choose based on the function provided for min() and max(), and for clamp(), we set both a min() and max() with a relative value in between.

01:26 - We’ll definitely be covering these within the video with the demo.

01:29 - And within these layouts we can also use auto-fit or auto-fill to automatically place child elements into a parent grid.

01:36 - This is another tool for dynamic responsive layouts without media queries.

01:41 - We’re going to be going over all of those terms and more with demos galore.

01:46 - I’m a really big nerd, I don’t know why I made that rhyme and put that in this video, but I did, so let’s just dive into these demos and 1 line layouts.

01:55 - I made a handy little site called 1 line layouts at 1linelayouts. glitch. me so that you can follow along or play on your own and have a reference for the power that CSS can bring to your layouts.

02:06 - For our first single line layout, let’s solve the biggest mystery in all the CSS land: centering things.

02:13 - I want you to know that’s easier than you think with place items centered.

02:17 - I call this the “definitely centered layout. ” What we need to do is first specify the layout method, which is display: grid here, and then we are going to write place-items: center this is that one magical line of code, and I have these highlighted under the titles here.

02:32 - So what happens here is no matter what you put in here, it is going to stay centered to that parent element.

02:39 - So if we look at the HTML, we have this parent, and it’s just getting a background in blue, and then this child with a coral background, and it’s content editable so we can actually just type in here, we can have vertical content, “hello world,” and even as I’m typing, this child element it staying centered within the parent box.

02:57 - So I think that this is a really cool technique, place-item:center will solve all of your centered dilemmas.

03:03 - Next we have the Deconstructed Pancake. This is something that we see all the time on marketing sites, you see this row of three items, and usually on mobile we’ll want that to be stacked, wich is why I called this the pancake stack but deconstructed, because as you increase the size of the viewport, those items will start spanning into the same line, so it starts when they’re all on top of each other, and then they start to deconstruct as you increase the size of the viewport.

03:32 - So the way that we’re going to be doing this one is using the shorthand for Flexbox, flex: 0 1 is what we will be using for this look that you’re seeing right now without the stretching.

03:43 - But if we did want it to stretch, we would set that to flex: 1 1 and then the flex basis.

03:48 - And the reason why we do this is because the flex shorthand stands for flex grow, flex shrink, and then flex basis.

03:56 - So again, here we have flex: 0 1 150px, that is the basis here so as we increase the size it is not going to be growing much.

04:05 - Also, when we decrease it, it’s going to be staying within that 150px size.

04:09 - When we do change that to 1, I’m just gonna delete this line of code here, now we see that this is going to be stretching, so here you can see that it stretches to fill the space, even as it wraps, and as I increase it to be even larger of a viewport size, these items are going to be filling that space.

04:25 - So this is the Deconstructed Pancake, a really common technique that we see on marketing sites.

04:29 - This is usually is gonna be like an image with some text about the product, and you can write it by using the flex shorthand.

04:36 - I like to call this one Sidebar Says, and it takes advantage of that minmax() function for grid layouts.

04:43 - So that is the line here, we have grid-template-columns: minmax() and then and value.

04:49 - That’s pretty straightforward with minmax(). But what this is doing is essentially as we are increasing the size of the viewport, it’s going to be taking that 25% size, that max size, and as we decrease it, it hits this point where it’s 150px, and where 25% is smaller than 150px, so it’s going to clamp it at that minimum size.

05:10 - So it’s going to be increasing when it can take up that viewport space, but if we have content in here that we don’t want squeezed, or we want it to stop being 25%, and at a minimum be 150px, or whatever value we set here, then that it’s exactly what minmax() is doing for us.

05:27 - And in the grid template columns here we are writing grid-template-columns: minmax() that base value, and then the relative value, so 25%, and that second element is getting 1fr.

05:37 - So if we look at the HTML, we have these two elements, this yellow side bar section, and then this purple content section, and they are taking up the units of space that we are specifying.

05:46 - In this specific case, we can actually even set this to auto, and it would be looking the same, because we are only setting the size to that first element.

05:54 - We’re gonna go over auto versus 1fr in the next example.

05:58 - But I think that is this pretty neat, a great way to set a minimum size, but then let your elements stretch on larger viewports to fit those layouts a little bit better, based on how your user is seeing your website.

06:12 - Next we have the Pancake Stack, unlike the Deconstructed Pancake, this one do not shift when the screen changes sizes.

06:20 - This is a very common layout that we see for both websites and applications across mobile and desktop functions.

06:27 - So it looks like this, as we are increasing and decreasing the size this content is not changing, and what we are doing to create this, is we are writing the grid-template-rows: to be auto 1fr and auto.

06:41 - So what we are doing is essentially telling the first and last row to take up the space that the internal elements allow.

06:49 - So if this header was two lines, then it’s going to increasingly take up more space within this vertical layout.

06:57 - With this auto section I could have more content here, but it’s not going to increase the size, because what we’re doing is setting the auto placed row first to take up that specific size based on the content within it, and then the remaining space, is the remaining fractional unit.

07:15 - So as we increase this also vertically, we can see that the first and last row are not growing.

07:22 - They’re still only gonna be taking the size that they need, but if I decrease the horizontal space, as Footer Content moves on to the next line, it is going to take space up within that layout.

07:32 - So with grid-template-rows: auto 1fr auto you can create the pancake stack.

07:36 - You could even have an application toolbar down there.

07:39 - Again, this is the one that we see really commonly, and grid-template-rows is a great one to know.

07:45 - Another very common layout is the Holy Grail layout.

07:48 - Does this look familiar? I think we’ve all have seen a website or two that looks exactly like this at some point on our web journey.

07:56 - We’ve got your Header, your Footer, your Left Sidebar over here, your Main Content, and then a Right Sidebar.

08:03 - And we can write all of this in one line of code using grid-template.

08:08 - So grid-template allows us to write the grid-template-rows and grid-template-columns at the same time.

08:16 - So that’s pretty neat. It’s also super responsive.

08:18 - Again, you see this auto content taking up what we are specifying here internally, and then this Main Content taking up the 1fr, and so what we are specifying in here is grid-template with auto 1fr for this middle space, and then auto for the footer, and then we’ve got our columns of auto 1fr and auto.

08:38 - So you get the whole Holy Grail layout with grid-template: and auto 1fr auto / auto 1fr auto.

08:45 - This slash is what denotes our rows versus columns when we are writing the grid-template.

08:51 - So I think that this one is great to know, grid-template is something that I use all the time.

08:56 - This is not like exactly one line, I mean, all of these you have a little bit more to add, but with this when you’re already in grid-template, you can then specify grid-columns and grid-rows for each of these elements.

09:10 - So here I’m specifying what grid column I’m placing the Header in.

09:15 - I’m going all the way across all three, so 1 / 4 to get those grid tracks from the first track to the last track, and then the left side we have it going inside the first, so from 1 to 2, this main section going from 2 to 3, so that’s gonna be taking up the middle section.

09:32 - And then the right side is from 3 to 4, so that’s going all the way to the end of this grid that we created.

09:37 - And then for that footer it’s going all the way across just like the header.

09:40 - So you do specify where items are placed, when it is a little bit more of a complex UI, and here if we look at the HTML, I have this parent, then I have header, then I have left side bar, then I have the main section, right section, and then the footer.

09:58 - So, you can write all of your layouts in one line using grid-template property.

10:04 - Next we have another classic, the 12-By or 12-Span Grid.

10:08 - You can quickly write grids in CSS using the repeat grid function.

10:13 - And here we’re setting a repeat of 12 columns, so that looks like this: grid-template-columns: repeat the number that we want to repeat, and then 1fr.

10:22 - So this would be the same as writing grid-template-columns: 1fr 1fr 1fr… 12 times, but because I don’t want to do that, I’m just gonna write repeat 12 and then 1fr, and then we have a 12-By grid.

10:36 - So now we can place our items within this grid however we want.

10:40 - If we want it to span all the way across the 12 columns, we would use this span-12 element– I just gave it a span-12 class– and have it going from 1 to all the way to 13, so it’s taking up the full space of the 12 columns ending at the grid track of 13, which would be the end of that 12th column line.

10:58 - For the span-6, this is going from 1 to 7, for span-4, this is going from 4 to 9.

11:04 - It can go anywhere. I could start this at the first line and make it go all the way to 9.

11:09 - I could have this go to 5 and have it still span-4, but the cool thing is you can just place this wherever you want inside of your UI.

11:16 - So I fI wanted to have this start from 6 and go to 10, I could do that.

11:20 - And then we have this span-2, and this is just going from 3 to 5, And then a peep at the HTML, we just have this parent element, and then the inside of here, we’re just giving it classes based on those span elements that we were just adjusting within that grid template.

11:36 - So the repeat function is very, very useful when you don’t want to keep typing out 1fr auto multiple times, it just lets you quickly write information.

11:47 - We are going to expand on the repeat function for number seven.

11:51 - And this technique is super cool, super useful, if you take away anything from this video, I think this would be a great one to keep in your repertoire.

11:59 - I like to call this the RAM technique, which stands for Repeat Auto and Minmax.

12:03 - And the line of code here looks like this. You have the grid-template-columns: repeat(auto-fit or auto-fill, minmax (the base value, and then 1fr)) for a fractional unit.

12:15 - And here we have that base value as 150px, I’ll show you exactly what’s going on.

12:20 - So as we increase the size here, these elements are going to fit to take up the space, these four boxes, as I decrease it, they’re going to hit this 150px base value, and then they’re going to wrap onto the next line.

12:35 - But here we have them auto-fitting, so they’re going to be spanning to take up as much space as they can.

12:42 - There’s some really cool algorithms at play here.

12:45 - Now if we change this to auto-fill, this will look a little bit different, so let me just update that to auto-fill.

12:52 - Here now as I increase the size, it’s not going to be spanning and stretching to take up the remainder of the space.

13:00 - It’s actually going to be suing that 150px as a baseline and stay within that.

13:04 - At smaller sizes, there’s no difference here, but you really see the difference at larger sizes as you have additional space.

13:12 - And I use this technique on the page that you’re looking at here itself, this auto-fill, so that these two segments would stretch and shrink but not exceed a specific space that I wanted them to, and then I have them centered.

13:28 - So you can center this within the parent as it spreads to a larger size.

13:33 - That’s always an option, and a really great technique to know.

13:36 - Remember R-A-M, RAM, Repeat, Auto-fill or fit, and then Minmax, and you can get these responsive boxes, you can use these for images, you can use them for a lot of things.

13:47 - It’s something that we see all the time for cards, and this is a great use of all of these fancy new grid capabilities in CSS.

13:57 - For our next layout, we are heading back to Flexbox land, I wanted to include this one because I just find it so useful and I use this all the time.

14:04 - I call it the Line Up, why? I don’t know. I’m tired.

14:08 - If you have a better name, please let me know, leave a comment.

14:11 - But the main thing that I wanted to demonstrate here is justify-content for placement of items.

14:16 - And here specifically, I wanted to highlight justify-content: space-between to place items at their edges.

14:22 - And so in this example we have these three cards, and you can see that as I’m stretching or shrinking the size of this viewport element, they are maintaining the same height as each other.

14:34 - And in fact we are having them fit to the top and bottom, and this interior content, so this description, like, I can keep typing here, this is then going to be centered within the remaining space.

14:49 - And so the reason that this is happening is because for these cards we’re giving them this flex-direction: column this display: flex, the Flexbox mode, and then we are justify-content: space-between.

15:02 - So because this is a column for the flex-direction, the space-between is going to be right here in between these three elements, this little box here, the description and the title.

15:14 - And so here as I’m having additional space added or removed vertically, they are centering themselves, and this just makes for a much neater layout.

15:24 - I’ve used this a lot here without that justification, it looks a lot more messy, but because of the stretching here, because of Flexbox, because this justify-content: space-between, I use this all the time, and I think it’s really important to know that with Flexbox you can change the direction and you can justify your content in unique ways.

15:41 - It doesn’t have to be just centered, you can also do center, you can do space-around as well, or space-evenly.

15:49 - But in this case I think that the best way to justify is space-between because this way we are ensuring that the first and last element here in our layout, which is going to be this h3, and this whole visual box, remain flush to the top and bottom of our cards.

16:08 - Here’s where we get into some techniques with a little less current browser support.

16:12 - I like to call this one Clamping My Style, and it’s a really neat trick.

16:17 - Remember at the beginning of this video, we talked about min() max() and clamp().

16:21 - Well, here’s where it can come into play for layouts and element style.

16:25 - Here I’m specifying the width using this clamp() function, and I’m setting clamp(23ch, 50%, 46ch).

16:34 - What does this do? Let me show you exactly what’s going on here.

16:38 - As I increase the size of this element, the parent container here, it is going to increase the size of this card, and as I decrease it, it decreases it.

16:48 - But what we are setting here is a minimum and maximum size for it to clamp to as it reaches that 50% size.

16:57 - This card wants to be at 50% width, but if that 50% means that it’s bigger than 46ch, which stands for 46 characters, then it’s going to stop getting bigger.

17:10 - The same thing happens with the smaller viewport size.

17:12 - It’s going to stop decreasing in size when 50% of it’s parent size means that it is smaller than 23ch, which is 23 characters.

17:22 - And these specific character units can be used to make legibility a little bit easier.

17:28 - So in this case, I don’t want this card to get any smaller than that because then the paragraph gets harder to read, and the same thing with getting bigger than 46 characters, then it gets too long and hard to read.

17:39 - So you can use width: clamp(minimum size, the actual size, and the max size) to create some really cool responsiveness within this element itself.

17:49 - And you can also use clamp for font size, that’s a really great use case too.

17:53 - You can have this responsive flexible typography, you can have like clamp(1. 5rems, and then a– say 10vw for the viewport width, and then 3rems as the biggest size, and that way as you resize your window, you’re going to be having a minimum value of 1. 5 rems, maximum value of 3 rems, and then you’re gonna have that grow and shrink into that remaining space.

18:21 - So it’s pretty cool to see this actually working in a browser.

18:26 - Again, this doesn’t have full browser supports, but it is a really great technique.

18:31 - So if you’re using this, make sure that you have fallbacks and do your browser testing.

18:36 - And finally, we are at the end, and this is the last layout tool, and this layout tool is the most experimental of the bunch.

18:43 - This was recently introduced to Chrome Canary and Chrome 84+, and there is an active effort from Firefox in getting this implemented in browser, but it is currently not in any stable browsers at the time of this recording.

18:56 - I do want to mention it though, because it’s such a frequently met problem and it’s just simply maintaining the aspect ratio of an image or a video, or of an iframe.

19:05 - And so what this is is respecting the aspect, Respect For Aspect, that’s the name I gave it.

19:11 - And it is the aspect ratio property, oh my gosh, I’m gonna be so excited when this is implemented in all browsers.

19:19 - What this is doing is, as I am resizing this parent element, the image here, so this is just like, I gave it a class of visual for this box here that is right here, this is getting an aspect ratio of 16 to 9 and no matter how I increase it or decrease it, it is going to keep that aspect ratio.

19:39 - This is something that is so needed for when you are pulling in content from the CMS or otherwise, and you have a specific dimension that you have that media at, and this, this for example, in the previous example if I scroll up, as I resize here, since I’m only setting a height, and it’s just getting the 100% width of whatever remaining space that I’m providing here, it’s actually changing the aspect ratio of the whole visual box, and that’s not what we want.

20:08 - That is going to make you force a decision on if you want to either fit the content inside of there, so it’s smaller and fits within the space, or if you stretch it out and you have it fill the content, and you’re only seeing a piece of that media, not the full image, and that’s also gonna cause all sorts of problems.

20:27 - So having this aspect-ratio is very exciting, you can also set this to a square if you do one over one, you could have this be 1 over 2, or you have this actually longer than it is wide within this parent here, so that’s gonna be maintaining that aspect ratio, and it’s just exciting, so I wanted to mention it and let you know that it’s coming down the pipeline.

20:49 - And those are the 10 really powerful lines of CSS that I wanted to talk about in this 1 line layout video.

20:55 - I hope that you all learned something new, and if you’re looking for these demos, check out 1linelayouts. glitch. me Thank you all for watching, if you want more CSS content and to dive deeper into layout techniques, including all the bells and whistles of CSS Grid and Flexbox, check out the CSS podcast that I do with my co-host Adam Argyle.

21:16 - It is at pod. link/thecsspodcast Thank you again, enjoy the rest of your web day! ♪ [music] ♪.