10 modern layouts in 1 line of CSS

[ music] Hi, I’m Una, a make exponent on the Chrome teamfocusing on CSS and WebView-x. Thank you for meeting me today, I am super roused to is starting and talk about some magical boundaries of CSSthat do some serious ponderou lifting, and let you build robust modern organizations. Before we dive in to that, there are a couple of key periods that will help you in your styling excursions, and are super good to know aboutas we walk through these techniques. Most of the items I’m mentioning today are used in conjunction with Grid or Flexbox layout and you can denote those as flaunt: gridor exhibition: flex on the mother part. The first key calls are fr and automobile, these are used with grid organizations to mean fractional units of opening, that’s fr or automatic space, that’s vehicle based on the minimum content sizeof the items within that element.For grid layout we also havethe minmax() affair, which lets us mounted a minimum and maximum appraise with our layout bandageds to enable accept layout without media queries. We also have separate min() max() and fasten() performs offered in some browsers that producing reasoning to CSS. The browser specifies which evaluate to choose based on the purpose provided for min() and max (), and for fix (), we name both a min() and max() with a relative quality in between. We’ll definitely be covering these within the video with the demo. And within these organizations we can also use auto-fit or auto-fill to automatically plaza child elementsinto a parent grid. This is another tool for dynamic accept schemes without media queries. We’re going to be going over all of those the arrangements and more with demos galore. I’m a really big nerd, I don’t know why I represented that rhyme and positioned that in this video, but I did, so let’s just dive into these demos and 1 way layouts.I made a handy little site announced 1 path organizations at 1linelayouts. glitch.me so that you can follow along or play on your own and have a reference for the strength that CSS can bring to your layouts. For our first single cable layout, let’s solve the biggest puzzle in all the CSS land: centering things. I want you to know that’s easierthan you think with sit entries centered. I announce this the “definitely centered layout.” What we need to do is first specifythe organization procedure, which is display: grid here, and then we are going to write place-items: core this is that one magical pipeline of system, and I have these foreground under the deeds here. So what happens here is no matter what you put in here, it is going to stay centered to that mother element.So if we look at the HTML, “were having” this parent, and it’s just getting a background in blue, and then this child with a coral background, and it’s content editableso we can actually time category in now, we are able to have horizontal content, “hello world, ” and even as I’m typing, this child elementit abide centered within the parent box. So I think that this is a really cool technique, place-item: centerwill solve all of your centered quandaries. Next “were having” the Deconstructed Pancake. This really we identify all the time on commerce locates, you see this row of three entries, and usually on mobile we’ll want that to be stacked, wich is why I announced this the pancake stack but deconstructed, because as you increasethe size of the viewport, those pieces will start spanning into the same line, so it starts when they’re all on top of each other, and then they start to deconstructas you increase the size of the viewport.So the acces 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 straining. But if we did want it to stretch, we would gave that to flex: 1 1 and then the flex basis. And the reason why we do this is because the flex shorthand stands for flex grow, flex diminish, and then flex basis. So again, now we have flex: 0 1 150 px, that is the basis here so as we increase the sizeit is not going to be originating much. Also, when we decrease it, it’s going to be staying within that 150 px length. When we do modification that to 1, I’m just gonna deletethis route of system now , now we see that this is going to be stretching, so here you can see that it stretchesto fill the gap, even as it wraps, and as I increase it to be even larger of a viewport size, these entries are going to be filling that space.So this is the Deconstructed Pancake, a really common techniquethat we picture on sell sites. This is usually is gonna be like an likenes with some text about the commodity, and you can write it by using the flex shorthand. I like to call this one Sidebar Says, and it takes advantage of that minmax() perform for grid layouts. So that is the line here, we have grid-template-columns: minmax() and then < min> and ethic. 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% sizing, that max length, and as we lessen it, it touches this detail where it’s 150 px, and where 25% is smaller than 150 px, so it’s going to clamp it at that minimum size.So it’s going to be increasing when it can take up that viewport seat, but if we have content in now that we don’t want squeezed, or we want it to stop being 25%, and at a minimum be 150 px, or whatever value we mount here, then that it’s exactly what minmax() is doing for us. And in the grid template towers here we are writing grid-template-columns: minmax() that locate significance, and then the relative quality, so 25%, and that second element is getting 1fr. So if we look at the HTML, we have these two elements, this yellow-bellied place forbid segment, and then this violet content area, and they are taking up the units of infinite that we are specifying. In this specific case, we can actually even provided this to auto, and it would be gaping the same, because we are only setting the sizeto that first element. We’re gonna go over auto versus 1fr in the next illustration. But I think that is this pretty neat, a great way to set a minimum length, but then let your parts extend on larger viewports to fit those organizations a little bit better, based on how your customer is seeing your website. Next “were having” the Pancake Stack, unlike the Deconstructed Pancake, this one do not shift when the screen alterations sizes.This is a frequently occurring layout that we find for both websites and applications across portable and desktop roles. 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 vehicle. So what we are doing is essentially telling the firstly and last row to take over the opening that the internal ingredients stand. So if this header was two words, then it’s going to increasingly take up more opening within this vertical layout. With this auto sectionI could have more material now, but it’s not going to increase the immensity, because what we’re doing is setting the vehicle residence row firstto take over that specific width based on the content within it, and then the remaining space, is the remaining fractional contingent. So as we increase that is something that vertically, we can see that the first and last row are not flourishing. They’re still exclusively gonna be takingthe size that they need, but if I lessen the horizontal space, as Footer Content moves on to the next way, it is going to take space up within that layout.So with grid-template-rows: vehicle 1fr autoyou can create the flannel-cake load. You could even have an application toolbar down there. Again, this is the one that we appreciate really commonly, and grid-template-rowsis a great one to know. Another very common layoutis the Holy Grail layout. Does this look familiar? I think we’ve all have seena website or two that looks exactly like this at some pointon our web journey. We’ve got your Header, your Footer, your Left Sidebar over here, your Main Content, and then a Right Sidebar. And we can write all of thisin one line of code exploiting grid-template. So grid-template allows us to writethe grid-template-rows and grid-template-columnsat the same time. So that’s pretty neat. It’s also super responsive. 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 specifyingin here is grid-template with automobile 1fr for this middle space, and then auto for the footer, and then we’ve got our lines of vehicle 1fr and auto.So you get the whole Holy Grail layout with grid-template: and vehicle 1fr vehicle/ vehicle 1fr vehicle. This reduction is what denotes our rows versus pillars when we are writing the grid-template. So I think that this one is great to know, grid-template is something that I use all the time. This is not like accurately one order, I convey, 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-columnsand grid-rows for each of these elements. So now I’m specifying what grid columnI’m sitting the Header in. I’m going all the road 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 firstly, so from 1 to 2, this main section going from 2 to 3, so that’s gonna be taking up the middle-of-the-road section.And then the right side is from 3 to 4, so that’s going all the way to the endof this grid that “weve created”. And then for that footer it’s goingall the path across just like the header. 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 mother, then I have header, then I have left side bar, then I have the main section, right section, and then the footer. So, you can write all of your layoutsin one line exercising grid-template property. Next we have another classic, the 12 -By or 12 -Span Grid. You are rapidly write grids in CSS using the repeat grid function.And here we’re decided a repetition of 12 rows, so that looks like this: grid-template-columns: recite the count that we want to repeat, and then 1fr. So this would be the same as writing grid-template-columns: 1fr 1fr 1fr … 12 ages, 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. So now we can place our components within this grid nonetheless we want. If we want it to spanall the space in all the regions of the 12 columns, we would use this span-1 2 element–I merely handed it a span-1 2 class– and have it going from 1 to all the way to 13, so it’s taking up the full gap of the 12 articles ending at the grid trail of 13, which would be the end of that 12 th editorial thread. For the span-6, this is going from 1 to 7, for span-4, this is going from 4 to 9. It can go anywhere. I could start this at the first indication and make it go all the way to 9. I could have this go to 5 and have it still span-4, but the cool thing is you can time placethis wherever you miss inside of your UI. So I fI wanted to have this startfrom 6 and go to 10, I could do that. And then we have this span-2, and this is just going from 3 to 5, And then a peep at the HTML, we are only have this mother part, and then the inside of now, we’re just give it classifies based on those span elements that we werejust adjusting within that grid template. So the reproduction capacity is very, very useful when you don’t want to keep typing out 1fr automultiple times, it just lets youquickly write information. We are going to expand on the reiterate run for numeral seven. And this proficiency is super cool, super handy, if you take away anything from this video, I think this would be a great oneto keep in your repertoire.I like to call this the RAM technique, which stands for Repeat Auto and Minmax. And the line of code here looks like this. You have the grid-template-columns: reproduction( auto-fit or auto-fill, minmax( the base importance, and then 1fr )) for a fractional gang. And now we have that basi significance as 150 px, I’ll show you exactly what’s going on. So as we increase the immensity here, these elements are going to fit to take up the gap, these four caskets, as I weaken it, they’re going to hit this 150 px base importance, and then they’re going to wraponto the next string. But now we have them auto-fitting, so they’re going to be cros to take up as much space as they can.There’s some really cool algorithms at play here. Now if we change this to auto-fill, this will gape a little bit different, so let me precisely update that to auto-fill. Now now as I increase the width, it’s not going to be spanningand straining to take up the remainder of the room. It’s actually going to be suing that 150 pxas a baseline and stay within that. At smaller immensities, there’s no difference here, but “youve been” read the differenceat larger sizings as you have additional space. And I use this skill on the page that you’re looking at here itself, this auto-fill, so that these two segmentswould stretch and diminish but not exceed a specific space that I wanted them to, and then I using them centered. So you can center this within the parent as it spreads to a larger size. That’s always policy options, and a really great technique to know. Remember R–AM, RAM, Repeat, Auto-fill or fit, and then Minmax, and you can get these responsive containers, you can use these for images, you can use them for a lot of things.It’s something that we find all the time for placards, and this is a great use of all of thesefancy new grid capabilities in CSS. For our next scheme, we are heading back to Flexbox land, I wanted to include this one because I only find it so useful and I use this all the time. I call it the Line Up, why? I don’t know. I’m tired. If you have a better epithet, please let me know, leave a comment. But the most important thing that I wanted to demonstrate here is justify-content for placement of items.And now exclusively, I wanted to highlight justify-content: space-betweento place parts at their shapes. And so in this example we have these three posters, and you can see that as I’m stretching or decreasing the size of this viewport element, they are maintaining the same height as one another. And in fact we are having them fit to the top and sole, and this interior content, so this description, like, I can prevent typing here, this is then going to be centered within the remaining space. And so the reason that this is happening is because for these cards we’re giving them this flex-direction: article this expose: flex, the Flexbox mode, and then we are justify-content: space-between. So because this is a column for the flex-direction, the space-betweenis going to be right here in between these three points, this little box now, the specific characteristics and the designation. And so here as I’m having additional spaceadded or removed vertically, they are centering themselves, and this just makesfor a much neater layout.I’ve employed this a lot now without that explain, it appears a lot more messy, but because of the elongating 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 material in unique styles. It doesn’t have to be simply centered, you can also do center, you can do space-around as well, or space-evenly. But in such cases I think that the best wayto justify is space-between because this way we are ensuring that the first and last elementhere in our layout, which is going to be this h3, and this whole visual carton, remain flush to the topand bottom of our cards. Here’s where we get into some proficiencies with a little less current browser supporter. I like to call this one Clamping My Style, and it’s a really neat joke. Remember at the beginning of this video, we talked about min() max() and fasten (). Well, here’s where it can come into play for schemes and part style.Here I’m specifying the width working this clamp() perform, and I’m situate fix( 23 ch, 50%, 46 ch ). What does this do? Let me testify you exactly what’s going on here. As I increase the size of this element, the parent receptacle here, it is going to increasethe size of this card, and as I weaken it, it weakens it. But what we are setting here is a minimum and maximum sizefor it to clamp to as it contacts that 50% size. This poster wants to be at 50% thicknes, but if that 50% meansthat it’s bigger than 46 ch, which expressed support for 46 people, then it’s going to stop getting bigger. The same thing happens with the smaller viewport size. It’s going to stop decrease in sizing when 50% of it’s parent width means that it is smaller than 23 ch, which is 23 reputations. And these specific character gangs allows us to realize neatnes a little bit easier. So in such cases, I don’t want this cardto get any smaller than that because then the paragraph comes harder to read, and the same thing with get bigger than 46 people, then it gets too long and hard to read.So you can use width: clamp( minimum sizing, the actual size, and the max size) to create some really cool responsiveness within this element itself. And you can also use clamp for font length, that’s a really great expend action more. You can have this responsive resilient typography, you are eligible to have like fix( 1.5 rems, and then a– say 10 vw for the viewport extent, and then 3rems as the biggest size, and that route as you resize your window, you’re going to be having a minimum value of 1.5 rems, peak quality of 3 rems, and then you’re gonna have that grow and contract into that remaining space. So it’s pretty cool to see this actually working in a browser. Again, this doesn’t have full browser foundations, but it is a really great technique.So if you’re using this, make sure that you have fallbacks and do your browser testing. And lastly, we are at the end, and this is the last layout tool, and this layout tool is the most experimental of the knot. This was recently introduced to Chrome Canary and Chrome 84+, and there is an active act from Firefox in coming this implemented in browser, but it is currently notin any stable browsers at the time of this preserve. I do want to mention it though, because it’s such a frequently converged difficulty and it’s just simply maintaining the characteristic fraction of an persona or a video, or of an iframe. And so what this isis respecting the aspect, Respect For Aspect, that’s the figure I dedicated it. And it is the aspect ratio property, oh my gosh, I’m gonna be so excited when this is implemented in all browsers. What this is doing is, as I am resizing this parent element, the likenes now, so this is just like, I uttered it a class of visual for this box here that is right here, this is getting an vistum rate of 16 to 9 and no matter howI increase it or abridge it, it is going to keep that aspect ratio.This is something that is so needed for when you are pulling in contentfrom the CMS or otherwise, and you have a specific dimensionthat you have that media at, and this, this for example, in the previous example if I scroll up, as I resize now, since I’m only position a stature, and it’s just getting the 100% widthof whatever remaining seat that I’m accommodate here, it’s actually altering the appearance fraction of the whole visual carton, and that’s not what we want. That is going to make you coerce a decision on if you want to eitherfit the content inside of there, so it’s smaller and fits within the space, or if you pull 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 motive all sorts of problems.So having this aspect-ratiois very exciting, you can also mounted this is something that a squareif 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 now, 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. And those are the 10 very texts of CSS that I wanted to talk aboutin this 1 order layout video. 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 procedures, including all the bells and whistles of CSS Grid and Flexbox, check out the CSS podcastthat I do with my co-host Adam Argyle. It is at pod.link/ thecsspodcast Thank you again, enjoy the rest of your network date![ music].

As found on YouTube