On this lesson we take a look at the Webflow Grid Overlay. How to properly use the grid overlay in Webflow and how to position elements above each other using the Z-index using Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
let's go ahead and jump into the next
section
of these tabs which is the cards we know
we are going to follow a little bit of
what our grid
layout has on our design uh we have a
card on the left and the card on the
right has a width of 380 to match the
the guide and then the middle card which
is 300 pixels which matches the
grid right now i only have three tabs
available but in fact we're going to
need four tabs because the very first
tab is going to be this
intro this intro screen so what i want
to do is copy another
another one of these panes as soon as i
do that it duplicated
that very first tab image so what i want
to do
is because it duplicated that
first tab and it added it to the very
last one
we can actually swap this out
so that this first card right here
is actually going to be a a close
button so let me just add a text block
this is going to be a close
button we can remove this
we know that this first tab is going to
take care of that
intro uh we can even pull in the image
the x square we know that this little
icon is going to be our first tab
so that it closes all of these and i've
added this icon
to identify that it's going to act as a
close button
so that every time i click on this it's
going to take us back to this
intro
there we go so now we have the right
order
and if we preview this we're gonna have
tab one
that's our intro tab two this
the second vr headset tab three tap four
and so on so the first card we know
is going to be uh it's going to have the
pricing
the title and a little bit of summary so
i go ahead and copy this title
or this summary vr card
and i'm gonna add some properties like
the background i want this to be
completely white
so simply enter that
and in the v card i want to add a
text block for the price
oh but notice now that this whole
text whatever text we add in here even
if it's a heading
it's going to be white so it's going to
be hard to read
and so what i want to do is make sure
that this
card that we just created this vr card
is
going to have topography uh it's going
to have
enough contrast so we're gonna use this
dark color
okay so this one's gonna be our pricing
4.99
and this h1 we're going to turn it into
an h3
and this is going to be the name of the
device or product
name okay and then the third is going to
be
a paragraph this paragraph we want it to
copy and paste over what we have
but right now there's no limit to how
big this card can be
so what i want to do is add a vr card
max width
so on the class i'm going to go over
here to the max width
and that will match the 380 pixels from
our grid
and if we do that same thing we can copy
this
card and duplicate it on this one we're
just going to have
features so features what we can do
instead for having a paragraph
we want to have a list so if we go to
the
elements layout we can look for the
basic
and we can add in a list and within the
list
we can have some items as you can see
here there's some items already
populated for us we can add in a text
block and so we can start filling this
text block with the information that we
have from the design
and each card should have because they
have its own class
i want to add some some padding so some
spacing
across i think at 20 pixels is what we
have in our design
so it's about let's see here we have 16
from the top and 24 from the side
so we can go and change these manually
like so
16 and 16.
there we go if you remember back
from our previous lesson remember that
we created
a class on the section so if we were to
click
on any of these cards right now all
these orange
highlights mean that there's some
updates created
based on the inherited class so the
section
has a class to center all the text
because we are using
centered across many sections but we
might not necessarily want to have
center text
in some of these cards so we can
overwrite that by simply changing that
value to the left text align left so we
can set a class for the price
this price is using this color and it
uses
uh the class of archival narrow at 36.
we might want to repurpose this class in
another time
so what we could do is try to get these
these styles
of the leading i see that we have this
as a leading text
so it's archival narrow 22 pixels and
this one is archivonero
36 pixels so let's create a class called
lead xl this lead excel is going to
resemble what we created here
on our style sheet with with we have
leading excel and leading excel bold and
leading
m so we can use those as a secondary
class
those ones are going to use the archivo
narrow font
and they're going to be 36 so 36 divided
by
16 rems that's about 2.22
that's still pretty big for me i think
so i'm gonna just keep that
now that i see it on the web i'm gonna
keep that at 2
and i think that's a pretty good size
same for this one this is a 22 i believe
22 bold
archivo narrow bold so we can call this
one
lead m
and we're going to make this archivo
narrow
and the font size is going to be 22
divided by 16 rems
there we go now i noticed that the
normal size is actually not
as light as we see on the design here so
that's okay for now
what i want to do is just have different
styles for different
or different elements that we can
repurpose
then we can call a we can have a global
class for that particular color
so if we go into our playground and
let's say i wanted to add a specific
color to something
so text color primary and anytime we use
that and then we can duplicate
this and call this another one called
secondary
so we know the color on this one is
going to be the secondary color
like that tc primary and tc secondary
lead
xl we can just refer back to that global
class that we just created tc
primary and just like that we're using
that nice pop accent
another thing we can do is now start
adding another div block inside here
and this is going to be the flex we're
going to use the flex because there's
going to be two elements inside
these two elements are going to be the
logo and the buy
button so let's add in the image
now going back to the flex let's go back
and add the image that we just uploaded
which is the oculus logo
and we're going to use the primary just
like that
also notice that flex now has everything
aligned
to expand to expand vertically and
stretch
but we want to do is justify these
elements and space them between each
other
okay so we can have a combo class called
space between
and we can call this space between
just like that we have a combo class on
the flex
that takes care of the justification of
each of these elements
this is going to be at the third vr card
and inside of it we want to add an image
a
vr card we know that the vr card of
course is going to have some properties
like padding and stuff like that
we want to have a combo class for this
particular
card which is actually just the
thumbnail right so we want to call this
the clip
and we're referencing this a lot from
what we did here with figma
in figma we've named some of these cards
in a way that it's easier for us to
bring over
so pf box this is the details this is
the features and this is the clip
and so what i want to do is add those
border radius now to add some
to add the styles of these vr cards
making sure that we've selected
the vr card global and not the combo
class card that we just made
so we select the vr card going down to
our borders
and make this about 12 pixels
just like that we have those nice border
radius
and also what i want to do is stack
these vr cards
in a flex so that they start
aligning to each other if i do that
right here i can't because it has
the original padding that's created
based on
what we made one thing i can do is just
turn this into flex like that
and it's going to apply the flex global
property that we just created
we can organize this however we think
will work best
so we have that image in the middle and
that's on the top
but the problem right now is that this
flex class is
always going to stretch all the cards
out
vertically and we don't want to stretch
these cards vertically
we want them just to just align uh
nicely within so let's remove that
actual
clasp from here and remove the padding
as well and we're going to call this
just flex
and right now notice that because i've
ha
i'm adding this directly into the pane
it's not letting me change some of the
values
over here unfortunately because we're
adding
uh a class and and flex on that type tab
pane directly
webflow does not let us modify the
alignment and justification on it so
instead we're just going to
keep this back to how we had it which is
the px20
or the p20 actually to add the spacing
of the padding and we're going to create
a new container
we're going to call this diff block flex
so just the same way we've been doing
i'm going to call this flex
and we're going to add in all those
cards inside okay
right like that
and we want to swap this out this one
goes at the end
again you can also modify the order of
these
flex items or these cards based on
the property panel but right now to keep
it simple i just want to use the order
from the navigator panel
on the vr card on this particular clip
we're gonna get rid of all the spacing
and padding
so that there's no spacing similar to
how we have these cards
and then on flex we're gonna add a class
called align
center and this is going to remove the
stretch of the align
properties now all we got to do is start
having these elements float on top of
the actual
card in the middle so if you notice the
design this card is floating on top and
this one is also floating on top
so the way to do that again is we have
to make sure that we establish some
sizes right now uh the the clip itself
is
actually expanding to 380 similar to
the other cards but in fact the clip we
want this to be three pixels
or 300 pixels so it matches kind of the
grid that we got going on here
and because all the elements are
shrinking um
are expanding are trying to fit
within these uh the flex layout
notice how each one of those cards has
some sizing
settings you can size it so that it
shrinks if needed
or if it grows if possible and etc
but what we're going to end up actually
just doing is making these elements
float
over above all right so let's select
each of these vr cards
this one we need to establish some
naming conventions okay so the first
card we're gonna have
it's gonna be called details and this
one we wanna
float uh we don't wanna float it
position absolute but instead i want to
have this relative
and i want to have this details card
come on top of this one
the way i can do that and right now
is by simply changing the c index to 20.
so the c index the way it works these
little values here we have
called the cnx so the first one is just
going to be
kind of like the first layer right so
anything
above one is going to be on top of this
one
if if you have this other card for
example and i call this
the features this one also can be a
relative
but i'm going to call this on c index 2
so on the second level of the c
index and what that does allow us to do
is to start modifying some of the
offsetting using margins but before we
do that i want to go back to the
fee card and simply
change something here and i want to add
is 100
with this 100 width is going to try to
expand
the card itself to match the max width
that we have given it and notice that we
have
these cards but they're not aligned to
the
grid if we click on any of these vr
cards we know we have 100
width so it's responsive but we also
have set a maximum of 380 pixels so it
doesn't go past 380 pixels
and currently what flex is doing is
trying to
adapt every element to fit this entire
container but it's not setting the
the the width that we are looking for
which is 380
and 380 and 300 we're going to have to
force those sizes
into each of these elements by using the
minimum width
so the minimum width on this particular
card is going to be 380
and that's obviously going to push
things out so that everything else is
going to be
shrinking it's going to start shrinking
this card
in particular we want it to be 300
pixels
and now notice how the features is super
tiny because it's using a hundred
percent
and on this card we want this to be 380.
what that's going to happen is going to
take all that excess and
take it into an overflow right it's
going to overflow because you're
you're you're making all these blocks
try to fit into a container it's just
not going to be possible
so because these are relative and have a
c index
we can start transforming a little bit
of the margin to start
offsetting this so that it matches
the grid so right about there you can
see that it starts to match the size
that we're looking for
and we're going to offset this one to
the
to the right margin we're going to
offset it about 60
so right about there notice how that
image is
aligned to the to the three columns in
the
overlay and then this one on the
end we're going to do the same and we're
going to try to match it
around the same size which is negative
60 and that's about the size of
each of these columns on the overlay
so 60 on the left margin for the v
card and 60 on the
right on the right margin of this other
detailed v card
and boom there we go we have created
a over um an overlapping layout
utilizing a relative uh a position
relative
on each of these cards and urala
and and by using the negative margins
we've created some offsets
to create the illusion that one is on
top of the other
let's finish up by simply adding some of
the overflow
so the vr card class we set to have
12 pixels of radius but it won't it
wasn't visible because the card itself
was not overflowing
but now that it's overflowing it's going
to act like a mask
and it's going to take in consideration
those order radius
so let's toggle these off now that we
have aligned our elements to the grid
all right so let's finish up here and
try to match some of the styling here we
know we're missing some padding on the
top and the bottom
but we don't want to affect the padding
on the sides yet because we
we want the sizing to fit naturally to
the overlay
so on this tab pane i'm going to call
this
product pane
and we're just going to affect the top
padding and the bottom padding so it's
about
40 pixels
on the list item
and there we go we have a nice
spacing between each of these elements
great so now we just need to do the same
thing copy this over to each
tab just tap three tap four
now we have these beautiful cards
interacting with the content
and this is bound to happen where you
would have
this elements and these elements
of course these elements are position
absolute and this one is also position
relative so every time you try to move
things
into different tabs you make this little
bug
happen where things are kind of
overlapping
what i suggest we do for this type of
situation
is we make sure that the actual tab
component so here we select the tabs
uh has a higher
the actual tabs has a higher c index
than the vr
headsets right now vr headsets they
don't really have a c
index defined so if i were to change
this c index headset to
one what's gonna happen is that
this one as well is gonna be using the
one
but the actual container this one
is still not it's not above those
elements so we might need to change the
c index on this container
so it's higher than those headsets
so let me actually just move these over
in here
like that and make sure that the tabs
we have a tab so we can call this
product tabs
has a c index higher so let's say this
one is a hundred
this is going to be higher than the
actual headset
which we've defined as a one c index
and when we do that we'll automatically
make sure that
every time this loads these headsets on
the side
will always stay below the tabs
and anytime we interact with the tabs
they will always be
above it cool guys i'm going to simply
select this vr tab
and i'm going to call this the close tab
because this combo class is going to
have some properties that will make it
float
on top of things i'm going to make this
a position absolute
and i'm going to turn this into a
50 and it's relative to the section
of course and i want this to be
at top zero so right now it's it is at
the top
zero so we can't see it because of
course everything is falling on top of
it
so if we see it like this those tabs are
nicely aligned in the middle
but there's not enough room for us to
see
that close button to toggle it so the
next thing i want to do is make sure
that i select the
the correct tab here the tab the first
tab which is close tab
we're going to change the c index
and we're just going to start changing
the value into a negative space so maybe
around
around there so about 60 pixels we want
that to
just move move it over but we know we're
gonna need to make compensate for that
space
in the section so we click on the
section we can start adding some padding
to the top so that that space that we're
adding is to compensate that
offset of that of that button
i still think this button is not
completely centered so let's go ahead
and fix that
this needs to be now that it's at
50 percent we need to make sure that the
sizing in this case
it's about 50 pixels so we need to
offset this by 25 so negative 25
right about there that's the perfect
middle
and that looks a little better
this vr headset uh does not have
the spacing correctly okay i see what
happened we have the spacing added
on this tab because we move things
around
so in fact what we want to do is add the
mx
class over here so we have the mx
or the margins left and margin right add
it to the middle tab
instead of this first one that happened
when we started moving things around
okay all right so this is starting to
look a little bit more balanced and this
is where we want it to be
first tab second tab third tab and then
we close this
and we see all of our although and we
see the intro section
right here it was a long class guys i
know it took a while to get
over this section but i know that this
treatment that you
are learning is something you're going
to be able to apply on your own projects
and i guarantee it you will
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS