Foundation for Responsive Web Design Tutorial - 4 - Offset and Block Grid Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

alright guys in this video I want to
talk to you about offsetting columns
now what offset in columns means is
taking a column and shifting it over a
certain amount so you don't always have
to have your columns butted or right up
against each other you can use
offsetting if you want to add a little
bit more space or just shift the column
left or right or do whatever so how do
we do that well in this example what I'm
gonna do is I'm gonna make a layout with
two columns and let's say that I'm gonna
have a column on the left like the left
menu and then my main content on the
right I don't want to but it up right up
against that left menu I wanted to shift
it over a little bit maybe one column
and then that's when my main content
begins so if you guys want to know how
to do that well here you go
alright so inside my row which I already
have I'm gonna make a div and the first
one is just gonna be normal since this
is my left column so I'm just gonna say
medium medium one looks good and of
course this is columns and I also made
this other arm
real quick CSS file since I was getting
kind of tired of typing out inline
Styles all time so you know this is just
my own and this is just gonna give a
background color so these are all just
different background colors again
nothing to do with foundation this is
just me being lazy but this is what we
have so far what the f is this crap def
outta here dude geez next identity must
I hit something with my sausage fingers
alright so right now we have let me just
put left menu and it's one column wide
alright so now we want to have our main
content on the right so I'm gonna make
another div and this class is gonna be
medium and instead of taking up the rest
of the area which would be 11 what we're
gonna do is we're gonna set this equal
to 10 now remember the rule we always
need to take up 12 columns
so the reason that I have ten right now
is because we're going to shift this
over by one how do we do that well if we
do medium offset one what this is gonna
do is it's going to take this column
which is ten wide shift it over by one
and plop it in the new location so it
would essentially be column number three
where it's gonna start so I'm gonna name
this BG two to give it a different
background color and I'll say write
content so let's look at what's going on
then you can easily see what's up so
this is our first column which is one
wide on the left now instead of this one
on the right but it up right against
here what we said is we're gonna shift
it over one and then we're gonna make
our right content now one other thing
that you need to pay close attention to
is that whenever you shift a column or
offset it you need to include that in
your column total so this is only ten
wide but since we offset it by one it
took up another one so this actually
counts as 11 so as long as you add up
all your numbers medium offset plus
medium and they all add up to 12
you're gonna be golden so you can
actually you know you can have this is
two so maybe we want our left money be
too wide and we can shift this over by
eight and we would add a two right here
so eight nine ten eleven twelve and we
didn't break anything so make sure that
they always add up to 12
simple enough so what I want to do now
is teach you guys about block reads now
block grids are awesome whenever you
have a layout in every column is an
equal width so whenever you have a
layout that's like two on the left and
ten on the right this isn't gonna work
but if you ever have like you know when
you go look at someone's profile
pictures in every single picture is the
same width in the same height and all of
the columns are equal well this would be
example of
when you can use blocker it's to make
things really easy so inside your row
let's say that we want to have three
items per row all the time
so I'm gonna make a unordered list and
for this class I am going to set this
equal to medium block grid 3 now the
number you put right here is saying how
many items in this case how many
pictures do you want to appear in your
rows so whenever we start adding our
images there's always gonna be three of
them for each row so an image source and
let me copy this a bunch of time so you
guys can see what so let me just make
eight why not so we have eight images
here and since we have a blocker add
layout of three watch what happens
so this says that each of these items
even though we didn't specify each
single one manually since we stuck them
all inside a blocker head of three
they're each going to take up an equal
amount three per row all right you know
what these images are looking a little
bit you know jumbo I actually one have
five images per row so I can just change
this to 5 and my entire layout is gonna
update like that pretty awesome and you
can actually show you guys another cool
trick so maybe you wanted to have this
on a desktop but on phones look at that
on a phone in smaller devices I mean
things are getting kind of weird-looking
and then it switches the vet
unexpectedly so let's say that maybe on
small devices that's all small then we
want to have I don't know like three
something like that so this would be
medium and large then on smaller
if I shrink it down to small it pops
over to three pretty sweet eh so you
might want to do that something like
three five and ten who knows whatever
but that is a block read it's pretty
much a really um lazy not a lazy way
really convenient way you can say the
items I'm gonna put in here make all the
columns even and this is how many items
I want to have on each row