or rather than ganks so time to unleash
the beast that is the grid system so
beautify uses flexbox under the hood to
create this twelve column grid forest in
which we can lay out our content now
flexbox is purely a vanilla CSS
mechanism which allows us to create
these grid light layouts very very
easily
beautify just obstructs a little away
from the CSS and it adds in all of this
functionality into its grid components
now if you want to learn more about the
CSS flexbox mechanics under the hood i'd
suggest you watch my CSS flexbox series
on this channel I'll leave the link down
below so anyway with this beautify
flexbox grid we can easily make
different layouts and they're responsive
as well so you can see down here we have
a demo of this now I said that this was
a 12 column layout or a 12 column grid
but what does that mean exactly well it
means that our horizontal space from
left to right is split up into 12 equal
columns of width now imagine we have 12
different elements that we want to
spread across on the page now if we
wanted them all to be on one row then
we'd assign each element one column of
width like this and if you counted these
there'd be 12 so they'd all be spaced
equally on the page now we could want
them to have a bit more width each one
of these elements so we could say well
okay give each element in width of two
columns and they'd look like this
there's six here so we need another row
to get the other six on okay same goes
for this we could say okay well make
them a bit bigger three columns and
width or four columns in width or six or
twelve which is the whole width now we
use this grid system and these different
columns to layout our content in the
page it's not always going to look like
this so for example say I have an image
on the left and some text on the right
now I might want the image to take up
four columns in width on the left but
the text on the right I might want to
take up eight columns of whipped and
that's fine because eight plus four is
twelve and that takes up all the space
available to us all right so if we watch
this you'll notice that this is also
respond
if it just kind of goes down into these
different sizes but if we scroll down
here we're going to see some different
versions of this grid like this if we
make this a little bigger you can see
that we have two at the top then three
then four now what I'm going to do is
make this a little smaller now let me
just scoot this out like so and now it's
gone on to four different rows if I can
find it there it is so now we have two
three and two and two before it was two
three and four at the bottom so it's
rearranged this based on the screen size
it's come back to four again okay so
it's very flexible and we're going to be
using the grid throughout this series to
layout the content on our pages so
that's a little bit about it
let's start by creating a bit of a grid
on one of our pages so then how do we
make this grid exactly well first of all
let's go to one of our pages I'm going
to go to the dashboard and we'll do our
grid in here now we've already created
this V container and we said that our
grid would live inside this container so
that's the first thing to do I'll delete
that little bit of content arrow the
next thing we need to do is create a
layouts and a layout basically
represents a row of content so we use a
component convey - layout to do this now
that we want to specify that this is
going to be a row of content we can also
use column and that would use flexbox
vertically for us but for the most part
we're going to be using row okay we
might look at column later on so you can
think of this as a row of elements we're
making a row on the grid now then inside
here we need to use elements or
components called v-flex
and they are the elements which are
going to be placed into these different
positions on that row on the grid so for
example let's do what we'll say v - flex
so you can see this as a container
element for a certain element on this
row if we go back to the docs over here
this would be a V flex element this
would be a reflex element they all
would be so they represent these
different positions right okay then so
now these V flex elements they can have
different props which tell it how to
space out the content on the screen
remember we talked about break pottery
we have these different break points
extra small small medium large extra
large now what we can do is say okay
extra small screens I want you to take
up six columns of width or twelve
columns of wit doll for wherever you
want and we always start with the mobile
it's always a good idea to do that so
you go with a mobile first approach and
it looks good on a mobile and then
you're extending it to larger screens so
I'm gonna say here XS which was the code
for extra small screens and this isn't a
class this is just a prop and I'm gonna
say that at this size screen I want this
flex item this V flex component to take
up twelve columns a width so we say XS
and then twelve okay now then when it
gets to a medium size screen I want this
to be six columns of width instead
because we don't need it to be full
width on a medium sized screen we have
more room so we can be happy with just
half of the width which is six columns
so I can say MD and then six so extra
small screens and small screens it's
gonna be twelve when it reaches medium
size it's gonna be six columns of width
okay so for example let's do a button
inside here we'll say V - BTN and we'll
give this a prop of outline and what
that does is make an outline around the
button and we'll say block because we
want to give this a display type of
block these are just other props that we
can use on a bottom then I'm going to
give this a class of primary just to
color it that purple color now then
inside here I'm going to say one so that
if we look at this in a browser then go
to the dashboard you're gonna see this
right here so let me close that and this
right here is six columns of width and
it's taking up half of the horizontal
space available to us all right so let's
do the same thing for another button I'm
gonna do this again down
here change this to two and then save it
now we can see we have one and two each
six columns in width now when we get to
extra small screen sizes it's going to
be twelve columns in width or rather
when we get to small screen sizes
because for extra small is twelve and
it's twelve until it reaches medium so
let's make this a bit smaller and see if
this works
when we get to small screen sizes and
it's not working right so why use them
and that is because we've not said that
we want our elements to wrap on to the
next row when there's not enough room
and we have to explicitly do that and we
do that by typing in a rap prop in the
layout so let's save that and see this
again and now we can see this says
screen they take up twelve columns in
width when it reaches medium it goes to
six columns in width again okay cool so
this is all working alright then so
let's do a few more examples what I'm
gonna do is change this thing right here
to four columns in width for extra small
screens when it gets to medium I'm gonna
say take up two columns in width now I'm
going to copy this and paste it a couple
more times so let's think this through
we have this element at the top which is
twelve columns in width on extra small
screens and six on medium sized screens
then we have these three and on extra
small screen sizes that all four columns
in width now four plus four plus four is
twelve so they're going to take up the
whole row between them and then a medium
two plus two plus two is six and that's
going to take up half of the row
this will take up the other half so
let's say this and preview it and now we
can see on medium sized screens is two
two two and also 6 and if we make this
smaller on extra small and small we get
this one taking up twelve columns and
these take it up four all right so there
we go that's how we layout elements
using the grid system now what I'm going
to do is just one more little example
just to show you some of the spacing
options we have so let me come down here
and I'm going to create a new row so V -
layouts
now this is going to be a row again and
we're going to wrap the elements when
there's not enough room and inside we
need some v-flex
components as well so let's do the first
one v - flex and we'll say that on extra
small screens this is going to be four
columns in width then when it reaches
medium size screens is going to be three
so let me just create a button inside
here so V - BTN this is going to have an
outline prop again so we can see on the
page and also block to make it a block
level element we'll give it a class this
time on success just to make them a
different color and inside here we'll
say one and then we'll do the same thing
we'll grab this flex item and I'm going
to paste it down below and it's going to
have the same width on extra small
screens and on medium it's going to be
three as well so let's say this is -
okay now you'll notice that on medium
sized screens we have a width of three
and a width of three now that is six in
total and on extra small it's going to
be four and four in our values eight in
total so in both cases they're not
taking up the full width of the
available space in the room let's see
what this looks like first of all and we
can see it right here so on larger
screens it's only taking up this space
and we have all of this space empty and
on smaller screens again is taking up
this space and this third of space is
empty as well now that's fine we don't
have to take up the whole row of space
however if you just have two elements
you might want to position them
differently for example you might want
to put them in the center or you might
want to flop them to the right etc so
how do we control that behavior well we
do that by adding props to this V layout
this row so there's many different props
we can use the first one I'm going to
show you is going to be justify - space
- around so if we save this now what's
going to happen is it's going to justify
them in the center and space around them
okay so that looks a bit better right so
that's one option we have we could say
justify Center save that
and that puts them in the very middle
without spacing between them but space
on the left and right or we could say
justify and and that's gonna put them
hopefully at the end if I've got this
right yep puts them at the end okay so
that's how we move it around on the
screen as well if we don't take up all
of the available space I think I like
justify space around and by the way we
can do justify space between as well and
that is going to just put space between
them and we have one on the left and one
on the right so no space on the outer
edges again I think I'm gonna do justify
space around like so because I think
that looks best so if you want to learn
more about that just make sure you check
out the grid section on beautifier just
type in grid over here go to grid system
and you're going to see all these
different examples on the page so you
lay out your concept differently and
these are some of the options I was just
showing it right here we can also align
items justify them and add these
different options as well and it's going
to give you the resulting code down here
alright so we'll be learning more about
the grid as we go forward this is not
the end of it and it's going to start in
the next video where we're going to
start to lay out our actual concept for
the application using this grid system