Download "Flexbox or grid - How to decide?"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F3elGSZSWTbM%252Fmaxresdefault.webp&w=1139&q=75)
Table of contents
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F-Upx_M1z2nM%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F6aP9nyTcd44%252Fmaxresdefault.webp&w=1139&q=75)
![Junior приложение для портфолио за 1.5 часа от А до Я [React / Next.js / Tailwind / SSG]](/_next/image?url=https%3A%2F%2Funidownloader.com%2FcontentImages%2FJH8BXOXsR99ESAXPuR-u1zO_YbY%3D%2Ffilters%3Aquality(80)%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F9ejXh8AnM9Q%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FXTrXDgc7oHo%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FcurZmcNgCtw%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FhwWIm6DSSoE%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FiCx4oYgeUGw%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fvnmfn31G988%252Fmaxresdefault.webp&w=1139&q=75)
Video tags
Subtitles
Russian
00:00:00
flexbox grid we have two amazing layout00:00:03
tools available to us when we're writing00:00:04
our css these days but00:00:07
wait why do we have two layout tools00:00:10
well the thing is we all know when we00:00:11
should be putting on a pair of running00:00:13
shoes or dress shoes and it's a little00:00:15
bit similar when we're thinking of00:00:16
flexbox versus grid they are both things00:00:18
that create layouts just like shoes or00:00:20
both things that we put on our feet but00:00:22
they both serve different purposes and00:00:24
they have different strengths and00:00:25
weaknesses so in this video we're going00:00:27
to be looking at the differences between00:00:28
them we're going to be examining them00:00:29
and seeing what situations which one00:00:32
works best so when you're creating your00:00:33
layouts it just simplifies that decision00:00:35
for you and i'm going to give you a00:00:36
little sneak peek it's not necessarily00:00:38
but one dimensional versus two00:00:39
dimensional layouts at least not in the00:00:41
way that you might normally be thinking00:00:43
about it00:00:46
hello my friend and friends and welcome00:00:48
back to yet another video i'm so glad00:00:50
that you've come to join me once again00:00:52
and if you're new here my name is kevin00:00:53
and here at my channel i hope you fall00:00:55
madly deeply in love with css and i00:00:57
can't get you to fall in love with it00:00:58
i'm hoping to at least make you a little00:00:59
bit less frustrated by it and one of the00:01:02
ways that we can do that is by00:01:03
understanding which tool is the right00:01:05
one for the job and we're going to be00:01:07
able to do that today by breaking down00:01:08
flexbox versus grid so let's go and dive00:01:11
right into the code and take a look at00:01:12
them all right so here we are in codepen00:01:14
we're going to look at a few different00:01:16
examples this first example is more just00:01:18
to give us a general rundown on the00:01:19
differences between them and some of the00:01:21
default behaviors00:01:23
and examine a little bit what they do00:01:24
similar what they do different and we're00:01:25
going to break into other examples where00:01:27
i think it's more real-world situations00:01:29
that show where those strengths can come00:01:31
in and ways that you might want to use00:01:33
them and so right here you can see i00:01:35
have a set up here with flex and grid00:01:37
and basically they're the inner workings00:01:39
of each one of these is exactly the same00:01:41
and so i have my flex container has00:01:44
direct children here and we don't even00:01:45
need these commented ones out so let's00:01:47
just remove them00:01:48
and so we have the exact same children00:01:50
in both of these so we can just make00:01:52
sure we're on an equal playing field00:01:54
and so if we come in here on the flex00:01:56
container and we turn on our display of00:01:57
flex it will just make some columns flex00:02:00
does its flex thing and we get a bunch00:02:02
of columns they're sort of responsive00:02:04
they squish they grow a little bit they00:02:06
sort of do flexible things00:02:08
as the name implies they will and one00:02:10
thing that is important to know with00:02:12
flexbox is every direct child will00:02:14
become a column even if that means00:02:16
there'll be some overflow and that means00:02:18
we can get some horizontal scroll00:02:20
scrolling with flexbox when we're not00:02:22
careful with it so that is an important00:02:24
thing to take note whereas grid that00:02:26
won't really give you that problem by00:02:28
default because when you turn it on00:02:30
nothing happens00:02:32
and this is because well with00:02:34
a flex container display flex the00:02:36
default here is a flex direction of row00:02:40
and that means the parent is a row so00:02:43
the main axis is the row and that means00:02:45
all the children inside of it are00:02:47
becoming columns but this is we're00:02:49
choosing our flex container here so00:02:51
we're saying our flex container is a row00:02:53
so the children are becoming columns00:02:55
that's the opposite behavior that we00:02:56
have in grid where grid the default00:02:59
behavior is a grid00:03:01
auto flow00:03:03
of row and in this case it's creating00:03:05
rows and they're all stacking on top of00:03:07
each other so we could actually get a00:03:09
very similar behavior to flexbox by00:03:11
changing the autoflow to column and00:03:13
you'll notice00:03:14
they're almost the same not quite but00:03:17
they're almost the same when we do that00:03:18
and that's kind of interesting you'll00:03:20
see they sort of grow in they they00:03:21
shrink in a very similar way but there's00:03:23
a few little strange differences between00:03:26
them that we're not going to get into00:03:27
specifically in this video but it is an00:03:29
important thing to notice and if ever we00:03:31
do this this is going to lead to that00:03:32
situation where on both of them we are00:03:34
going to run into that overflow at one00:03:36
point because of just how these work and00:03:38
if you are familiar with flexbox you00:03:40
might be going well i can prevent that00:03:41
that behavior from happening but i have00:03:43
a display of flex i don't want any00:03:45
overflow so i can do a flex wrap of wrap00:03:48
and just like that now if things run out00:03:50
of room they're still gonna well they're00:03:52
not really squishy anymore until we get00:03:54
to this point but they do wrap around00:03:56
and they do this wrapping thing instead00:03:58
and i'll get into why they're behaving00:04:00
this way in just a second um but let's00:04:03
go into grid and let's actually change00:04:04
this grid auto flow here00:04:06
and instead of that a similar behavior00:04:08
we could do here is a grid template00:04:10
columns i'm going to do the simple00:04:11
version first and then we'll make it00:04:13
fancier uh so and often the thing you'll00:04:16
often see here is one fr just like a few00:04:18
times something like that which will00:04:19
give us uh in this case five columns and00:04:22
they're just five columns no matter what00:04:24
and they're doing their five column00:04:26
thing and that's it and of course you00:04:28
come on here and simplify that with a00:04:30
repeat of five one fr and then we have00:04:33
five columns or we could do four00:04:35
whatever you need and there we go we get00:04:38
the columns and it's wrapping the00:04:39
content but it doesn't sort of00:04:40
automatically wrap right we have these00:04:42
um they're just sort of we have four00:04:45
columns we're stuck with four columns00:04:46
now there is a cool thing and i'm not00:04:48
going to deep dive it in this video00:04:50
because i've talked about it a lot in00:04:51
other videos and if you'd like any of00:04:53
those there's more in depth flexbox and00:04:55
grid tutorials in the description below00:04:57
but i will remind you about that at the00:04:59
end as well um but with this autofit00:05:01
what you can do is a min max on here and00:05:03
so on the mid max here we give it two00:05:04
values the smallest we want them to get00:05:06
and the biggest we want them to get so00:05:08
let's say they have a minimum size of00:05:10
300 pixels because why not and a maximum00:05:13
size of 1fr00:05:15
and now we're actually going to see that00:05:17
we get a different amount of columns and00:05:19
they're going to wrap it's not quite00:05:20
like the flexbox behavior but we sort of00:05:22
get that like wrapping behavior as they00:05:24
wrap down and they go down and down and00:05:26
down and then back up this way00:05:29
and this is a really important point to00:05:31
look at this flexbox versus grid and an00:05:33
important two things to consider right00:05:34
now are it's not necessarily about a 1d00:05:38
versus 2d layout like we often hear and00:05:40
that's because if you look at here we00:05:42
actually have flexbox creating a00:05:44
two-dimensional layout in a way up here00:05:47
and then down here we have grid also00:05:49
making a two-dimensional layout and00:05:51
they're doing it in different ways and00:05:52
they have different constraints in00:05:54
different ways that they're creating00:05:55
this00:05:56
but it is important to know that flexbox00:05:58
can wrap and flexbox can do what what we00:06:00
think of as a two-dimensional layout but00:06:02
what's important with this00:06:04
is it's the way that we can control that00:06:06
layout that is one-dimensional and one00:06:08
way we can think about that too is each00:06:10
one of these rows is independent from00:06:12
the next one00:06:13
so if we shrink down to here like this00:06:15
column here we have a very narrow column00:06:17
here we have a big column here we have00:06:19
an even bigger column then we have some00:06:21
like this medium one a big one but like00:06:23
this this column here is not looking at00:06:26
anything above it anything below it00:06:28
this row is independent from the row00:06:30
above it it's independent from the row00:06:32
below it00:06:33
grid does not work that way00:06:35
grid is setting things up in a00:06:37
two-dimensional grid so the columns00:06:39
they're locked in this one only has this00:06:42
little short word in it but that column00:06:43
is stretching to match the other columns00:06:46
around it or when we have three or we00:06:48
have four the column in this row00:06:50
has to be the same as the column in this00:06:52
row now you can do things like span00:06:54
multiple columns but it's still locked00:06:57
into a two-dimensional grid and you00:06:59
can't have these like in-between columny00:07:01
things rows also work this way where you00:07:03
can't get these in-betweeny row things00:07:05
like you might think of in a masonry00:07:07
layout even though eventually that is00:07:09
part of the level three grid spec so we00:07:11
will get masonry layout which will be00:07:13
open up some interesting doors with css00:07:15
only hopefully it doesn't take too long00:07:17
to get there but first we need sub grid00:07:18
because that's the level two part of the00:07:20
spec but i'm getting way ahead of myself00:07:22
let's not worry about that stuff too00:07:23
much right now00:07:24
um but i just want to look at here and00:07:26
sort of the you can think you can00:07:28
already see grids a little bit more00:07:29
structured and flexbox is a little bit00:07:31
more flexible00:07:33
and now let's just let's come on to here00:07:35
and make a quick change but there's an00:07:36
interesting thing is if i do want to00:07:38
change the way things are behaving here00:07:40
a little bit i can't actually do a lot00:07:42
more work here to be able to make more00:07:45
changes to the flex stuff i actually00:07:47
have to come on to the children and in00:07:49
this case i'm going to do a flex00:07:50
container00:07:52
the direct child and select every direct00:07:54
chilled child on there and this is00:07:56
something that we don't generally need00:07:58
to do with um grit unless you're going00:08:01
into like alignment within the cell00:08:03
whereas with flexbox you pretty much00:08:06
very often have to go on to the children00:08:08
and set different things on here and so00:08:10
let's start with one thing that's kind00:08:11
of interesting which is going to be to00:08:12
throw a flex grow on here of one00:08:15
and that's going to break things a00:08:16
little bit you can see like now look at00:08:18
that they're always filling up all their00:08:19
available space we don't go those on you00:08:21
know that jagged edge we had before00:08:23
they're all filling up the available00:08:24
space00:08:25
we could even come on here and say a00:08:26
flex basis00:08:28
of 10000:08:30
uh actually that's not going to do very00:08:31
much let's come on here and say 33 and00:08:33
that's going to give us three columns00:08:35
but then this last one's allowed to grow00:08:36
so it breaks bigger00:08:38
and then so you get these sort of00:08:40
interesting things here it's you know00:08:41
it's it it's getting too small it's sort00:08:44
of figuring things out on its own um and00:08:47
again grid is just this structured00:08:49
thing it's really relying on what the00:08:51
parent is telling it to do and the00:08:53
children are living within the grid that00:08:54
is being created and what flexbox is00:08:57
really good at and that comes down to00:08:58
like before i set these on here is00:09:01
intrinsic sizing and relying on the00:09:02
intrinsic sizing of elements because a00:09:05
lot of what flexbox does is looking at00:09:07
that and when i say intrinsic sizing i00:09:10
mean how this item is shrunk down to be00:09:12
as small as the content inside of it00:09:15
just like this one just like this one00:09:16
just like all of these they're shrinking00:09:18
down to the size of the content that is00:09:20
inside of them that's the intrinsic00:09:22
sizing uh of an element and there's00:09:25
other ways to have intrinsic sizing but00:09:27
here and then we can you know here at00:09:28
one point they will actually start00:09:30
shrinking because they're running out of00:09:31
room and this is one of those really00:09:33
nice things with flexbox that00:09:35
the default behavior for it doesn't lock00:09:37
it in so much whereas with grid00:09:39
intrinsic sizing there's ways of forcing00:09:41
it in there just like there's ways of00:09:43
fighting against it within flexbox but00:09:45
the default way that it behaves is the00:09:47
grid sets things up and the children in00:09:49
there they fill up the space so they00:09:51
take advantage of that space that the00:09:53
grid is making available to it so what00:09:55
does all this mean when when do we00:09:56
decide which one we should be using and00:09:58
i want you to often be thinking do i00:10:00
want to be relying on the intrinsic00:10:01
sizing of something do i want it to be00:10:03
as big as it is or do i want to have a00:10:06
bit more of a structured control from00:10:08
the parents perspective00:10:10
and so one common thing that we come up00:10:12
with is navigations right and here i've00:10:13
color-coded things just so we can00:10:15
visualize a little bit more what's00:10:16
happening and i just have two identical00:10:19
navigations one's in a header with a00:10:21
class of flex and one's in a header with00:10:23
a class of grid so we'll come on here00:10:24
and we'll say flex and we'll do our nav00:10:26
list that's in there nav list00:10:29
and let's do a display of flex and the00:10:32
nav list is my ul so they all just go00:10:34
next to each other and i purposely put00:10:36
this really long link just to highlight00:10:37
some things here and we can come here00:10:40
and we can do a grid00:10:41
and then choose my nav list00:10:43
and let's do a display of grid if you00:10:45
remember this does nothing right and00:10:48
right away obviously the flexbox00:10:50
solution here just seems the better one00:10:51
right because one line of code sort of00:10:54
got me what i wanted whereas here i have00:10:56
to do more lines of code knowing the00:10:58
strengths of each one of them lets you00:10:59
go down the happy path go down the path00:11:01
of least resistance where you're not00:11:02
trying to fight against what you're00:11:04
using so much and so right away i think00:11:07
you know the flex one look at this look00:11:09
at that it's just working and then we00:11:10
get some overflow we're gonna fix that00:11:12
but we get down to here it's going and00:11:14
then huh okay that's that's actually not00:11:16
so bad right where's the grid one okay00:11:19
let's try and get a grid layout that00:11:20
actually looks okay so we're gonna come00:11:22
in and then well i guess we could do00:11:23
like i showed you before grid auto flow00:11:26
column on here and there we go it is00:11:28
coming but the spacing on these are kind00:11:30
of weird and well you know what we00:11:32
actually do have gap with flex so maybe00:11:33
we could do a gap of 1m here and i don't00:11:36
know if i really mean that gap on this00:11:37
one because look at these big spaces00:11:39
that are coming again default behavior00:11:41
maybe we could play with this a little00:11:42
bit to force the hand but00:11:44
i'm still liking this one better than00:11:46
i'm liking this one and okay well maybe00:11:48
you say don't use the grid auto flow00:11:49
column do that trick you showed before00:11:51
where i did my grid template columns of00:11:54
auto uh autofit and then on there we do00:11:57
our min max and let's just do a zero one00:11:59
fr and you can see see what happens with00:12:01
the zero one fr in here and00:12:03
we sort of go it looks a little bit00:12:05
better but look at this like here we're00:12:07
running into a problem because look at00:12:08
all my columns are actually pretty much00:12:10
the same size now and then this one's00:12:12
like super close it's wrapping on two00:12:14
lines but like look how the spacing is00:12:16
on equal now because of the size of the00:12:19
cells are all the same but that means00:12:20
the spacing is way off and00:12:22
that's not really good and once it does00:12:24
wrap on this or we went to zero maybe00:12:25
zero would be a little much let's try00:12:27
two or 150 pixels maybe just so it does00:12:30
wrap around00:12:31
um and then when they start wrapping00:12:32
it's even worse here right because00:12:34
that's that's kind of terrible and what00:12:36
happens if we wrap again like00:12:38
this isn't really wrapping the way i'd00:12:40
want it to it's really creating this00:12:42
rigid grid system that i don't want00:12:44
whereas up here if i just did a flex00:12:46
wrap of wrap00:12:48
and nothing really changes except now00:12:51
when i get to the smaller screen size it00:12:53
just wraps and it just goes down and it00:12:55
does what i need it to and each00:12:57
navigation item is the size of itself00:12:59
which is exactly what i wanted it to be00:13:02
so by using the intrinsic sizing of each00:13:05
item because i don't really want them to00:13:06
get big and bulky like i see what's00:13:08
happening over here and like the00:13:09
vertical spacing everything is off on00:13:11
this one right00:13:12
and whereas this other one it just sort00:13:14
of works and when i do run out of room00:13:16
they squish down and00:13:18
here i'm actually getting running into00:13:20
overflow issues again this is more00:13:22
narrow than you'll ever see but you know00:13:23
what i'm saying right00:13:25
and so00:13:26
flexbox clearly when we want this00:13:28
intrinsic sizing of things is just so00:13:30
wonderful and we just have these items00:13:32
that we want to go next to each other if00:13:33
one's bigger one's smaller we want to00:13:35
keep those sizings flexbox is just00:13:39
wonderful00:13:40
grid on the other hand we can use in00:13:42
ways and i'm not even going to get into00:13:44
like the big scale layout because often00:13:46
for large scale layouts it's wonderful00:13:48
but one place and i've talked about this00:13:50
before so you might have heard me say00:13:51
this but one place that grid really00:13:53
excels is actually again when we want00:13:56
more of a rigid system from the parent00:13:58
so let's say we want equal columns here00:14:00
and i'm going to do it with flex first00:14:02
where you get a display of flex on00:14:04
something and then it's kind of awkward00:14:06
we get a small column a small column00:14:08
this bigger column and let's throw a gap00:14:10
on there just so it doesn't look00:14:11
terrible00:14:13
and that works um but it takes more work00:14:15
now to get to the next step and again we00:14:17
can't do any more work really on the00:14:19
parent to get these to be equal if i00:14:21
want these to be equal i need to go on00:14:23
to the children then so i have to go00:14:24
into my columns00:14:26
and i have to sort of go against this00:14:27
intrinsic sizing and this is this is00:14:30
really relying this is because of the00:14:31
intrinsic sizing that this one is bigger00:14:33
than these ones because this has this00:14:35
really long paragraph in it and this one00:14:37
has shorter ones00:14:38
and that intrinsic sizing is really00:14:40
getting based on this big long paragraph00:14:42
here so because it wants to be bigger00:14:44
originally even once they get squished00:14:46
and they shrink down it's still going to00:14:48
be bigger than these other ones until i00:14:50
come on here and one common solution00:14:52
you'll see is putting a flex one and00:14:54
look at that now we get some more equal00:14:55
columns and that i mean it does the00:14:57
trick right it's not a terrible solution00:15:00
it solves our problem00:15:02
um even though there are situations00:15:04
where this could actually maybe not00:15:06
solve your your problem if some of these00:15:08
have padding and some don't you get00:15:10
these minor in discrepancies just00:15:11
because of how the flexbox algorithm00:15:13
works and stuff but let's not even worry00:15:15
about that it's just i find like here00:15:17
i'm doing i have to go on the parent on00:15:19
the children it's not that bad but this00:15:21
is also a very simple solution whereas00:15:24
let's let's turn all of this off00:15:26
and let's go look at it if i did a00:15:28
display grid and we'll do the gap as00:15:30
well00:15:31
and then we can just say i need three00:15:33
columns so i just say three columns and00:15:36
then i get three columns and i'm saying00:15:39
they're one ifr each this can result00:15:42
sometimes in unequal columns um00:15:44
especially if there's like long a really00:15:46
long word in one of them and not the00:15:47
other one00:15:48
so it's not a hundred percent of like a00:15:51
matte like perfect solution00:15:53
if you actually did a repeat with min00:15:55
max on these you might get something00:15:56
that's a little bit more consistent but00:15:58
most of the time you're not going to get00:16:00
a super long word or something that00:16:02
might be throwing things off so a simple00:16:04
thing like this00:16:05
will probably honestly do the trick00:16:08
and you just get three equal columns00:16:10
and what i like about this is it's the00:16:12
parent that's controlling it i can throw00:16:13
any children in there without worrying00:16:15
about that at all and it's a really00:16:16
simple solution and again it's pretty00:16:18
much the same amount of css we have00:16:20
three properties here we have three00:16:22
properties here00:16:23
and i guess a little bit more longer00:16:25
because you actually need two selectors00:16:26
for the flexbox solution on this00:16:28
but i just like that the parent is00:16:30
really in control and is creating a00:16:32
rigid layout that i can plug content00:16:34
into instead of getting a behavior from00:16:37
the parent and then have to get the00:16:38
children to behave the way i want them00:16:40
to and i have to sort of make the00:16:42
children in charge whereas here the00:16:44
parent is in charge of everything that's00:16:45
going on so i really do feel that for00:16:47
structured layouts grid is a much better00:16:50
solution and for those times we want to00:16:52
rely on the intrinsic sizing of things00:16:54
flexbox is a much better solution and00:16:56
that's whether there's wrapping or no00:16:58
wrapping here we have wrapping that's00:17:00
going on so more of what you think is a00:17:02
2d layout00:17:05
going on and again it's because of the00:17:06
flex direction and the control we have00:17:08
that we see flexbox as 1d whereas grid00:17:11
is 2d and where we can control both00:17:14
dimensions on the grid a little bit of a00:17:16
different way00:17:17
but you can make a two-dimensional00:17:19
layout using flexbox and you can make a00:17:22
one-dimensional layout with grid and one00:17:24
thing i want to go to before we get to00:17:26
the end of this before we wrap things up00:17:28
is i get asked a lot about if we can mix00:17:31
flexbox and grid and people seem to00:17:33
think you get stuck with one or the00:17:34
other but they work so well together so00:17:36
here i've set up my grid that gives me00:17:38
my three columns here and inside each00:17:40
one of these i have these guys uh which00:17:42
are my tags so if we just go take a00:17:44
quick look i have my uh this card00:17:47
article that's right here and in there i00:17:48
have a ul of tags and i can just do my00:17:51
display flex and a flex wrap on them and00:17:53
they get them my little cards that show00:17:55
up here and look at that they work and00:17:56
everything just00:17:58
works magically because these i want to00:17:59
rely on the intrinsic sizing of each one00:18:02
of those little tag things that i00:18:03
created and then i want more of a00:18:04
structured grid style thing for the00:18:07
content itself and i actually find that00:18:10
grid is an easier one to get started00:18:12
with even though there's a lot of00:18:14
properties that go on with it they're a00:18:16
lot more straightforward and there's a00:18:17
lot less worrying about it because00:18:19
you're doing a lot less fighting against00:18:21
the intrinsic sizing of things and00:18:23
wrangling what's on the parent and00:18:24
what's on the child but whatever the00:18:26
case is and wherever you are in your00:18:27
learning journey if you do want to get00:18:29
into one or the other i have recently00:18:31
done videos on the easiest way to get00:18:32
started with grid and the easiest way to00:18:34
get started with flexbox and both of00:18:36
those are right here for your viewing00:18:37
pleasure and with that i want to say a00:18:39
really big thank you to my supporters of00:18:40
awesome over on patreon johnny jan00:18:42
stewart and tim as well as all my other00:18:44
patrons for their monthly support and of00:18:46
course until next time don't forget to00:18:47
make your own internet just a little bit00:18:49
more awesomeDescription:
Flexbox and grid are two fantastic layout tools. It can be hard to know which one to pick, but when you focus on the strengths of each one, it becomes a lot easier. 🔗 Links ✅ The easiest way to get started with Grid: https://www.youtube.com/watch?v=rg7Fvvl3taU ✅ The easiest way to get started with Flexbox: https://www.youtube.com/watch?v=u044iM9xsWU ✅ Using the Grid inspector: https://www.youtube.com/watch?v=m04RkJwzFgE ✅ Why I love grid-template-areas: https://www.youtube.com/watch?v=duH4DLq5yoo ⌚ Timestamps 00:00 - Introduction 01:13 - Comparing their behaviors 09:54 - When you should use flexbox 13:40 - When you should use grid 17:23 - Mixing flexbox and grid #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.com/invite/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter/ Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨🎓 Get a course: https://www.kevinpowell.co/courses/ 👕 Buy a shirt: https://making-the-internet-awesome.creator-spring.com/ 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Preparing download options
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "Flexbox or grid - How to decide?" video?
http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "Flexbox or grid - How to decide?" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "Flexbox or grid - How to decide?" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "Flexbox or grid - How to decide?" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "Flexbox or grid - How to decide?"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "Flexbox or grid - How to decide?"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.