♪ [music] ♪ Hi, I'm Una, a developer advocate on the Chrome team
focusing on CSS and WebView-x. 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. 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. Most of the items I'm mentioning today are used in conjunction
with Grid or Flexbox layout and you can denote those as <i>display: grid</i>
or <i>display: flex</i> on the parent element. The first key terms are <i>fr</i> and <i>auto</i>,
these are used with grid layouts to denote fractional units of space,
that's <i>fr</i> or automatic space, that's <i>auto</i> based on the minimum content size
of the items within that element. For grid layout we also have
the <i>minmax()</i> function, which lets us set a minimum
and maximum value with our layout bounds to enable responsive design
without media queries. We also have separate <i>min() max() </i>
and <i>clamp()</i> functions available in some browsers
that bring logic to CSS. The browser determines
which value to choose based on the function
provided for <i>min()</i> and <i>max(),</i> and for <i>clamp()</i>,
we set both a <i>min()</i> and <i>max()</i> with a relative value in between. We'll definitely be covering these
within the video with the demo. And within these layouts
we can also use <i>auto-fit</i> or <i>auto-fill</i> to automatically place child elements
into a parent grid. This is another tool for dynamic
responsive layouts without media queries. We're going to be going over
all of those terms and more with demos galore. 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. I made a handy little site called
1 line layouts at <i>1linelayouts.glitch.me</i> 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. For our first single line layout, let's solve the biggest mystery in all
the CSS land: centering things. I want you to know that's easier
than you think with place items centered. I call this the
"definitely centered layout." What we need to do is first specify
the layout method, which is <i>display: grid</i> here, and then we are going to write <i>
place-items: center</i> this is that one magical line of code, and I have these highlighted
under the titles here. So what happens here is
no matter what you put in here, it is going to stay centered
to that parent element. 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. So I think that this is
a really cool technique, <i>place-item:center</i>
will solve all of your centered dilemmas. 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. So the way that we're going
to be doing this one is using the shorthand for Flexbox, <i>flex: 0 1 <baseWidth></i>
is what we will be using for this look that you're seeing right now
without the stretching. But if we did want it to stretch,
we would set that to <i>flex: 1 1</i> and then the flex basis. And the reason why we do this is because
the flex shorthand stands for flex grow, flex shrink, and then flex basis. So again, here we have <i>flex: 0 1 150px</i>,
that is the basis here so as we increase the size
it is not going to be growing much. Also, when we decrease it, it's going
to be staying within that 150px size. 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. So this is the Deconstructed Pancake, a really common technique
that we see on marketing sites. 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. I like to call this one Sidebar Says, and it takes advantage of that <i>
minmax()</i> function for grid layouts. So that is the line here, we have <i>
grid-template-columns: minmax()</i> and then <i><min></i> and <i><max></i> value. That's pretty straightforward
with <i>minmax().</i> 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. 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 <i>minmax()</i>
is doing for us. And in the grid template columns
here we are writing <i>grid-template-columns: minmax()</i>
that base value, and then the relative value, so 25%, and that second element is getting <i>1fr</i>. 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. 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. We're gonna go over auto versus 1fr
in the next example. 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. Next we have the Pancake Stack, unlike the Deconstructed Pancake, this one do not shift
when the screen changes sizes. This is a very common layout
that we see for both websites and applications across mobile
and desktop functions. 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 <i>grid-template-rows:</i>
to be <i>auto 1fr</i> and <i>auto</i>. So what we are doing is essentially
telling the first and last row to take up the space
that the internal elements allow. So if this header was two lines,
then it's going to increasingly take up more space
within this vertical layout. With this <i>auto</i> 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. So as we increase this also vertically, we can see that the first
and last row are not growing. 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. So with <i>grid-template-rows: auto 1fr auto</i>
you can create the pancake stack. You could even have
an application toolbar down there. Again, this is the one
that we see really commonly, and <i>grid-template-rows</i>
is a great one to know. Another very common layout
is the Holy Grail layout. 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. 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 this
in one line of code using <i>grid-template</i>. So <i>grid-template</i> allows us to write
the <i>grid-template-rows</i> and <i>grid-template-columns</i>
at 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 <i>1fr</i>, and so what we are specifying
in here is <i>grid-template</i> with <i>auto 1fr</i> for this middle space,
and then <i>auto</i> for the footer, and then we've got our columns
of <i>auto 1fr</i> and <i>auto</i>. So you get the whole Holy Grail layout with <i>grid-template:</i>
and <i>auto 1fr auto / auto 1fr auto</i>. This slash is what denotes
our rows versus columns when we are writing the <i>grid-template</i>. So I think that this one is great to know, <i>grid-template</i> is something
that I use all the time. 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 <i>grid-template</i>, you can then specify <i>grid-columns</i>
and <i>grid-rows</i> for each of these elements. So here I'm specifying what grid column
I'm placing the Header in. I'm going all the way across all three,
so <i>1 / 4</i> 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. 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. And then for that footer it's going
all the way 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 parent, 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 layouts
in one line using <i>grid-template</i> property. Next we have another classic,
the 12-By or 12-Span Grid. You can quickly write grids in CSS
using the repeat grid function. And here we're setting a repeat
of 12 columns, so that looks like this: <i>grid-template-columns: repeat</i> the number
that we want to repeat, and then <i>1fr</i>. So this would be the same as writing <i>grid-template-columns:
1fr 1fr 1fr...</i> 12 times, but because I don't want to do that, I'm just gonna write <i>repeat 12</i>
and then <i>1fr,</i> and then we have a 12-By grid. So now we can place our items
within this grid however we want. If we want it to span
all the way across the 12 columns, we would use this <i>span-12</i> element--
I just gave it a <i>span-12</i> 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. For the <i>span-6</i>, this is going from 1 to 7,
for <i>span-4</i>, this is going from 4 to 9. It can go anywhere. I could start this at the first line
and make it go all the way to 9. I could have this go to 5
and have it still <i>span-4,</i> but the cool thing is you can just place
this wherever you want inside of your UI. So I fI wanted to have this start
from 6 and go to 10, I could do that. And then we have this <i>span-2</i>,
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. So the repeat function is very,
very useful when you don't want to keep typing out <i>1fr auto</i>
multiple times, it just lets you
quickly write information. We are going to expand
on the repeat function for number seven. 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. 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 <i>grid-template-columns:
repeat(auto-fit </i> or <i>auto-fill,</i> <i>minmax</i> (the base value,
and then <i>1fr</i>)) for a fractional unit. And here we have that base value as 150px, I'll show you exactly what's going on. 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. But here we have them <i>auto-fitting</i>, so they're going to be spanning
to take up as much space as they can. There's some really cool
algorithms at play here. Now if we change this to <i>auto-fill</i>,
this will look a little bit different, so let me just update that to <i>auto-fill</i>. Here now as I increase the size, it's not going to be spanning
and stretching to take up the remainder of the space. It's actually going to be suing that 150px
as a baseline and stay within that. At smaller sizes,
there's no difference here, but you really see the difference
at larger sizes as you have additional space. And I use this technique on the page
that you're looking at here itself, this <i>auto-fill</i>, 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. So you can center this within the parent
as it spreads to a larger size. That's always an option,
and a really great technique to know. 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. 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. 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. I call it the Line Up, why?
I don't know. I'm tired. If you have a better name,
please let me know, leave a comment. But the main thing that I wanted
to demonstrate here is <i>justify-content</i> for placement of items. And here specifically, I wanted to highlight <i>justify-content: space-between</i>
to place items at their edges. 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. 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. And so the reason that this is happening
is because for these cards we're giving them this <i>
flex-direction: column</i> this <i>display: flex</i>, the Flexbox mode, and then we are <i>
justify-content: space-between</i>. So because this is a column
for the <i>flex-direction</i>, the <i>space-between</i>
is going to be right here in between these three elements, this little box here,
the description and the title. 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. 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 <i>
justify-content: space-between</i>, 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. It doesn't have to be just centered,
you can also do <i>center</i>, you can do <i>space-around</i> as well,
or <i>space-evenly</i>. But in this case I think that the best way
to justify is <i>space-between</i> because this way we are ensuring that the first and last element
here in our layout, which is going to be this <i>h3</i>,
and this whole visual box, remain flush to the top
and bottom of our cards. Here's where we get into some techniques with a little less
current browser support. I like to call this one Clamping My Style,
and it's a really neat trick. Remember at the beginning of this video,
we talked about <i>min() max()</i> and <i>clamp()</i>. Well, here's where it can come into play
for layouts and element style. Here I'm specifying the width
using this <i>clamp()</i> function, and I'm setting <i>clamp(23ch, 50%, 46ch)</i>. What does this do? Let me show you exactly
what's going on here. 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. But what we are setting here is a minimum and maximum size
for it to clamp to as it reaches that 50% size. 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. The same thing happens
with the smaller viewport size. 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. And these specific character units can be used to make legibility
a little bit easier. 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. So you can use width: <i>clamp(minimum size,
the actual size, and the max size)</i> to create some really cool
responsiveness within this element itself. And you can also use clamp for font size,
that's a really great use case too. You can have this responsive
flexible typography, you can have like <i>clamp(1.5rems</i>,
and then a-- say <i>10vw</i> for the viewport width,
and then <i>3rems</i> 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. So it's pretty cool to see this
actually working in a browser. Again, this doesn't have
full browser supports, 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 finally, we are at the end,
and this is the last layout tool, and this layout tool
is the most experimental of the bunch. 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. 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. And so what this is
is respecting the aspect, Respect For Aspect,
that's the name I gave 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 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. 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. 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. So having this <i>aspect-ratio</i>
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. And those are
the 10 really powerful lines of CSS that I wanted to talk about
in this 1 line layout video. I hope that you all learned something new, and if you're looking for these demos,
check out <i>1linelayouts.glitch.me</i> 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. It is at pod.link/thecsspodcast Thank you again,
enjoy the rest of your web day! ♪ [music] ♪
