YouTube Transcript:
COMM 672 3-13-25

right can you guys see my
screen I can't see you guys so hold
on all right can I get a thumbs up so
we'll go ahead and um let's um let's
download today's today's lab so we gets
all set up so if you go into courses
modules and we are on module seven wow
already and you go to lab and S
beginning let's go ahead and download
the zip
file
okay and I'm going to put my zip file
into my
desktop and then I'm going to start a
visual studio code
so here I have Visual Studio code I'm
going to go to file open
folder and uh desktop I have it on my
desktop so have my lab beginning and go
ahead and open and so I have this all
set up so can I get a thumbs up when you
guys are all set up and ready to go
see
one
two couple
more all right
great okay all right so today we are
going to learn about uh
the CSS grid layout this is different
from the grid when we talk about design
and stuff this is the actual CSS grid
display grid um this is our agenda for
today uh we're going to learn the grid
terminology uh grid containers and grid
items and then we're start creating our
first CSS grid and then we're going to
go through a couple different uh the
grid properties to discuss you know how
to work in the grid
and stuff so um if you guys liked Flex
box Flex box as you might remember is
more onedimensional right so in Flex box
we either had the flex direction of row
or Flex direction of column um but in
the
grid uh the grid is a two-dimensional
layout so now we got to be able to do
both um we do both columns and we do
rows so CSS always had to has been used
to lay out web pages but it's always
been not really good at it as you know
we learned using floats and stuff um at
first table were used uh so you see
those really old school um but you know
table's not responsive um and it was
very limited and then we used floats
like what we did in this class floats
with the you know absolute positioning
relative positioning um and also inline
block block um all of these methods
they're kind of like hacks in a way um
and it left out a lot of important
functionality so grid is the first CSS
module created specifically to solve a
lot of the layout problems um developers
have been hacking their way around for
years so the Grid it's a two-dimensional
grid based layout system that aims to do
nothing less than completely change the
way we design grid based user interfaces
is two-dimensional which means in the
grid itself we can handle both the
columns and the rows um kind of like a
HTML table uh but you'll find it way
more flexible than a HTML table um you
work with grid layout by applying CSS
rules to both a parent element which
becomes the grid container and to the
element's children which become grid
items so kind of like how we talked
about Flex right when we um set a
container to
flex um then that container you know
becomes the flex f parent Flex container
and then you have the flex items this
the same thing for grid we have a grid
container which becomes the grid items
so let's do some basic
terminology so when we set the parent
container to Grid or inline grid um the
that becomes uh the grid container so as
you can see here with the yellow line we
have the grid
container um the direct Children of the
grid container
um it's called grid
items uh the horizontal lines that
divide the grid and separate the columns
and rows are um are are called grid
lines um so you have your horizontal
lines and then you have your vertical
lines and just not this this is a 3X two
grid however with the lines it has one
more um than the actual number of column
rows and this is how you would number
them so this is position one starting on
the left hand side then two then three
then four for three col uh three column
grid uh for the two row grid then you
have starting from top to bottom and
that is a typo right there that should
be three let me change
it okay so you have the and then going
from Top top to bottom put uh one two
and three and you'll see why numbering
these like this are important later on
but just understand that you know this
is called grid
lines we have a grid track is a space
between two grid lines forming either a
grid row this is a horizontal track or
grid columns this is a vertical track so
for instance there's three grid columns
here and there's two grid rows
here pretty simple uh grid cell it's a
single unit in the grid where a grid
item can be placed so these are grid
items and this is a grid
cell kind of like if you think like a
table
cell uh grid Gap grid Gap is the gap in
between so just like Flex we have gaps
and grid as well so we have the gap
which is the shorthand for grow and
columns um and then we have the row Gap
and then the column Gap you can separate
them as
well uh and a grid area so a grid area
just means uh the multiple sections of a
grid so if I chose um so for instance
here these four make up a the grid area
and you could Define it using grid area
um
specifically and we'll talk about a
little bit later how this works but that
is just a basic
terminology um and that's it uh these
are all of the properties that we can
use and we're going to go through um I
believe every single one of these um
later as we go through this lecture but
this is just an overview so these are
the properties for the grid
container and these are the properties
for the grid item we're going to go
through all of these as
well so the container a grid container
is set by the clearing GD or display
inline grid and can use display sub grid
on the container element so um we're
going to use an
example um to create a grid and you can
see in the what it's going to happen is
uh we will create a grid and then the
items inside the grid will become grid
items uh the contents comprise a grid
with grid lines forming boundaries
around each grid area uh please note
that when we do create a grid these
won't work on anything in the grid
container float clear or vertical line
uh and margins won't collapse inside a
grid
container just like
Flex all right let
me
see okay so um before we do this let's
start by um braing our grid so if we can
pull
up um the visual studio code so what I'm
going to do this time is when I um show
you preview I'm going to take this and
I'm going to copy it and put it
into um um Chrome the reason I'm going
to do that today is
um is because I want to show you guys uh
inspect
element and what happens when we do in
ECT the elements I'm going to pull this
into to the
side just like the side by
side
okay all right
so you can see here um in this first
index we have a container a general
container and there's four items in my
container this container has a class of
C1 and I'm going to use Grid in here so
if you open the if you double click this
to stick the index Tab and I'm going to
open
Styles so the first thing I'm going to
do is Target
this do
C1 and I'm going to display
grid okay um and you can see right off
the B
um there's no change in here okay I'm
going to pull this out but if I right
click in Chrome and go to inspect this
is my inspect elements and close this so
you have a little bit and I go into here
where it says
layout right under grid um I'm going to
toggle the grid
overlay right so here you can see that
this is now grid
container right so if I take
this and I take it off you can see that
there's no grid right but the moment I
set this
grid okay suddenly it has it shows I
have a grid right it shows my uh grid
lines right here's a one two three four
five five grid
lines um and then one two grid lights so
you could see it automatically uh this
container has now become a
grid all right so I want to show you
guys also um we're going to uncomment
this one
now so you can see here that when I have
this grid overlay you can see that this
one's a grid and this one's not a grid
right
and I'm going to go ahead and in this
item I'm going to add a
margin 10
PX and this is to show you guys that
when you're in a regular block display
the margin collapses right so you can
see here that there's 10 PX on around
each one of these but since these two
both have margins they collapse within
each other however inside a grid key
here as you can see your margin doesn't
collapse so just understand margin does
not collapse when you're using
grid I'm going to go back to the
lecture
um so how a grid works is that we need
to define the rows and the columns so
there's several ways to Define rows and
columns so for our first grid we're
going to use the grid template columns
and grid template rows to to uh Define
the size of the rows and the columns for
our grid so these are all different
examples of how we can use grid template
columns um we're going to start off with
something really simple but for here um
you could oops let me go back here you
can see that um we're creating a 3X3
grid um and we are telling it to be 10
pixel 10 pixel 10 pixel for the column
um and 10 by uh 10 pixel 10 pixel 10
pixels for the rows um and then we're
going to go through each of these but
these are some other examples where we
could use a repeat function um here and
here and it just in this slide it just
shows you that we could use pixels we
could use a
percentages and we can use you know text
like
Auto all right so what we're going to do
is um let's go back
to here we go side by side and I'm going
to take my grid here and I'm going to
add uh I'm going to create a 2 by two
grid so I'm going to go ahead and uh do
grid template
columns and I want the First Column to
two be 200 pixels so see it only made
one column here right but if I want two
columns I just to space and I could tell
it to
um do a second column here 200 by
300 right and if I want to um change the
size of the rows I do temp grid template
rows uh I'm just going to do 120 for the
top one and 200 for the bottom so you
can see right here I created um my 2 by
two
grid and I to it that I want the columns
to be the first column to be 200 the
second column to be 300 I did the same
thing with the rows I want the rows the
top one to be 120 and then the bottom
one to be 200 it's pretty
cool right ahead and save
that all right so with um any questions
so that's pretty simple I think uh just
creating the grid container in the
grid we lost you guys so if anyone don't
say something put in the chat for some
reason I I did what you did right now
and uh it looks like the boxes are all
together there's no space
between so let's take a look um okay
oops there's no space between
yeah is it
because did you lose the margin oh yeah
I missed that I added a margin 10 but
you can remove it and we could just you
could take a look that's what happens
when you remove the
margin all right so with grid comes
something called the FR FR unit and this
is really really cool in a way um FR
unit stands for fraction units so it
basically tells you um basically um it's
input that automatically calculates the
layout divisions while adjusting for
gaps inside the grid so you can see that
what we did before we actually tow the
grid you know 200 pixel to 500 and 500
pixel but what if you have like you know
you want something more responsive so
that's where the FR unit comes in so you
can see that FR unit it's basic
basically saying one fraction right so
if I only have one FR unit that's a
whole if I have one one FR it becomes
two halves if I do 1R and 1R and 1R it
becomes
1/3 um so here's some other examples so
if I do uh one you know one of R 1fr 2fr
so what it means is if you let's say you
add all of these that's 4 2 over 4 is
half 1 over 4 is a quar and 1 over 4 is
another
quarter um here you could think of it
more like so if we add them together
that's five so one over five is a
1 um and this is here 25 and two5 and
again if they're all the same um then
you have 1/3 of each
okay so let's
uh let's pull this in and let's take a
look at the FR FR
unit
can like to show the preview and then
actually copy
this into
Google all right let's take take a look
at what's going on here so here we have
uh six
items let's close out all
these
okay um and then you can see that in
these containers I've already set grid
to
them so that these two are already grids
so um let's take a look what happens if
we take the
first first one right so you can see
that we could set um let's choose
C1 and then let's just set the number of
rows so grid template rows um 85
PX 160 PX
and uh see let's do
C2 gr template
columns
20% 50 PX 120 P oops
okay um so here you can
see right
so see so here as you can see we um we
set these based off of uh pixels so we
set uh set
them uh 20% of the size 50 pixels and
120
pixels uh
so but you can see there's a bunch of
leftover space
here and so let's
see this 20% is flexible but these two
are not flexible you see as I open the
page wide and open the page smaller so
if I want this one to take uh one
fraction of the rest let's see what
happens
here so you can see that it Tak takes
up the rest of the space
here
so open and you close so the fraction
takes up one fraction of the rest of the
page um so for the first one I think it
will make more sense if we do
columns and Let's do let's try different
FR methods right so if we do
one so that just say we're making one
column that takes up one fraction so
what if we want to make two columns but
equally do half and half so we add one
more F FR you can see it equally uh
takes up half of the space and it will
adjust based off of the size it's really
cool here no matter how big or how small
my screen is it will take up exactly
half and half so if I do um one F again
you see it will divide you up into three
equal
spaces n is also equally spaced
out and it takes up 1/3
equally um so if I want to change one of
this uh to two FRS then you can see uh
you could think of this will take up
half of the space
here um and then these will be uh one qu
fourth no matter how big my screen is or
how small my screen is so that's a
really simple way to use
fractions to adjust the size
of adjust the size of your
grid all right so also Let's uh so for
the
bottom let's set
a grid templates
rows
oops to one F
FR and let's set a column so you can see
that
they're a little bit smaller here so you
can see um so you can see one of our it
basically because we didn't set a height
to our grid it only will take up as much
space as this grid height so let's go
ahead and set a height to our
container so if I set a height of
800
um you can see what happens is because I
only set the template roll one so let's
do it three times
right you can see It'll equally divide
up the height as
well it's pretty cool right here so
that's kind of what FR does it just
divides it um divides it in the grid
equally so no matter how tall or how
short your height is so I have 800 here
let's put it at 400 you can see even my
height is 400 I'll go ahead and just
adjust it to take up um exactly 1/3 of
the height here
so that is the
unit so any questions on the
unit and you you can also mix up FR
units of other types of units here so if
I take this right now I have three of
units but let's say I want to set the
first one to
20% you can see it automatically will
adjust and I set the middle one to maybe
200
pixels for some reason it's not
working I guess I can't do pixels and
fractions should be able to
see what's going on
here looks like we're not able to but we
can mix percentages and fractions I
think
um but yeah doesn't look like we could
do
pixels yeah but we could mix different
fractions percentages to create these
grids um the size that you want or need
them to be
all right any questions on the FR
unit it's a so you know if you think
about it it's just a really great way to
CU you know with these days you don't
know if your screen size are going to be
super large or super small the fraction
um unit allows you to just create like I
want this to be exactly one page all the
time um and I want these all to be equal
size or want this to be this much bigger
than this it just allows you to adjust
um the grid C uh the grid sizes um based
on like fractional
values okay um so let's talk a little
bit about uh the other
um CSS grid function so there are
Developer function helpers and this just
makes your coding easier and far more
efficient ient so there is one called a
repeat function uh is used to repeat the
number of columns and rows in the grid
layout and also the min max function
which defines a range between a minimum
size and a maximum size so we'll go
ahead and take a look at each one um
what they mean so the repeat function it
allows you to Define grid columns or
rows efficiently without manually
specifying each value so how it works
the syntax is you go uh you have your
template con or great template rows and
you repeat and you count and then the
size and then the same for the rows
count ins sides um so for instance you
know this as an example is if I have a
grid template columns and instead of
writing out 100 PX 100 PX 100 PX 100 PX
um I could write the repeat function
which means repeat four * 100 PX so
let's take a look how that looks in the
lab
smaller for
me okay so I'll go ahead and save
this and I'm going to open up the repeat
and Minimax
three uh let's close out all of these
too and uh Show preview I like to just
copy this just so I can put it
in all right go ahead and close out of
this for
now so you guys can see it
better
um all right so let's do the very basic
one so if I open the CSS into two Styles
and we're going to do number one right
we're going to we're going to um
we're going to start with
this this is C1 so go ahead
and select
C1 and I'm going to do grid template
column so I'm going to tell the number
of columns I want it to be four Columns
of 100 PX so I'm going to do 100
PX four times and so you can see now I
created a four column grid and each one
is 100 pixels wide but you know
sometimes you don't want to type out 100
PX four times so another way we could do
this is by typing out repeat and we're
going to say we want four
times 100
PX and so you can see this is exactly
the same thing and it will show you um
exactly same as the
top um I'm going to go ahead and
show you a repeat function with flexible
units right
so right here if we
select
C2 and we do grid temp The
Columns and we repeat three times *
1fr
this I'm going to repeat 3 *
1fr and so this is the equivalent of
writing out 1fr three times right so
we'll have
um we'll have these columns that equally
take up oneir of the space in this uh in
this container no matter if I'm this y
or
ifine this
small okay let's take a look what
happens if we do a
repeat uh with different values right so
let's just take this and see what it
does we temp The
Columns repeat
so what we're telling is we want to
repeat twice 100
PX okay so right now it creates two
columns at 100 PX and then we want to do
a
space and then we do 31
F so let's take a look and see what's
going on here right so what we're saying
here is we want the first two columns to
be 100 PX and then we want three columns
at
one so these last three columns it's
going to take up 1/3 of the space
each
um you can see it just fills out the
rest of these as these grid as well so
you could use repeat with different
sizes okay so you have two fixed columns
at 100 pixel each and then you have
three flexible
columns let's take a look at the next
one so can we use repeat with multiple
sizes so let's take a look at what
that's going to do so we're going to
choose uh
C4 and we're going to do the column
we're going to say repeat
twice 50 and one a far so let's take a
look at what this that does
so we want to do
twice 50 pixels 1
F okay so what's happening here is we're
saying 50 PX
1fr that's two column but you want to
repeat that two
columns twice right that's why you have
four columns
across so we take this and we repeat it
twice so you have four columns and then
it fills in the rest of the
grid like the last
one it looks like I have this I'm going
to delete that for
now okay so another thing you could do
is you can use repeat to define a
pattern for part of your grid and then
we added extra columns outside of the
repeat function yes
Angel could you repeat um what does it
mean the last part you you you explained
yeah that part yeah yeah
so if we take off this repeat right so
think of it this way we take off this
repeat essentially what we're telling it
is we're making a two column grid right
one that's fixed at 5050 pixel and one
one FR does that make
sense this
that okay but we're telling them to
repeat this one twice so if if I go back
so essentially what I'm saying is
repeat the fixed 50
pixel 1R repeat it one more time 50
pixel 1R
so think of it as a group we're
repeating this group
twice oh okay okay
yeah I know I had I first time I saw
that I was a little confused too but
that's um so basically you could create
uh you could say repeat you could create
your group here and then this is how
many times repeat that
group oh I see okay
um so we're going to do uh for C5 we're
going to see what happens if we uh do
this repeat and then we add one extra to
the end of it
so we're going to repeat twice this
group The 50px
1fr okay so we're we're it's the same as
the top but also this time we want to
add a 20% at the
end so now it
becomes a five column
grid so and you know this could be
anything you want it could be I believe
it could be in pixels
too yeah so that's that's and pixels is
fixed uh if you use percentage or
fractions those will be uh responsive so
this is how we could
create sorry so here what essentially is
saying we're repeating this group twice
51f 51f R and then at the end of the
repeating twice we're going to add
another column at 20% pix uh
20% so that's what happened
here okay before we do number six I'm
going to go back to lecture slide and
talk about mid Max but does anyone have
any questions on
this and of course right now we're just
using columns um just because it's
column has kind of like a whiff set to
it um with the row you could just
imagine it does it's pretty much the
similar except we'll have to set a
height to
our to our grid that's why we were doing
the
columns okay so that is the repeat
function it's just a a kind of a
shorthand and a way to think about um
creating columns or rows and just uh
putting them
together all right so the next one is a
min max function so the min max function
tells you like the minim so you know how
right now we're working with kind of uh
a fluid grid right but what if you don't
want the grid to be smaller than a
certain size or you don't want the grid
to be um larger than a certain size so
that's where the minmax function comes
in um and you you can set a minimum and
a maximum size for the grid columns or
rows so this ensures that the elements
remain responsive but they don't get too
small below certain size uh or you know
too large and so the syntax here is uh
for both The Columns and the rows you
write min max and then you Min is the
minimum size that you want and Max is
the maximum size uh you want so um can
see here for instance uh if we were to
do columns and we were to do two columns
here we have a the First Column we want
it to be a minim um we don't want it to
shrink smaller than 200 pixel uh we
don't want it to be bigger than 1fr um
and then the second column you don't
want it to be um 150 P smaller than 150
or larger than 2fr so let's take a look
at this what that actually
means um so here
so let's go ahead and let's go ahead and
actually take this example here right so
if we target
C6 oops wrong
one and we go grid template columns and
we do min
max 200f uh PX
1fr we do
space
Max 150 X comma
2R let's take a look if I was correct
all right so you can see
here
so as you can see the First Column we're
telling it we don't want it to be
smaller than 200 pixel and here we don't
want it to be uh smaller than 150 right
so when I stretch big enough it will be
this will be um so let's see what do we
have it so we had uh so there's three F
so this will be 1/3 and this will be
2/3 right and it will be responsive all
the way down until you hit 200 pixels
after that this will no longer get
smaller than 200
pixels so it's going to take the extra
space from here and it Go small until it
hits 100 pixels 150 pixels um and then
this will refuse to go smaller than 150
pixels so that's what the min max is um
so here I
have um so I'm going to go ahead and
comment this one out so you can
also use the minmax in the repeat so
what we're going to do here is let's
just do what it let's just try this one
um you could copy it paste it in okay
let's read it and see what it's saying
so what is saying is I'm going to create
two
columns and each column the smallest it
could be is 100 pixels and the largest I
want it to be uh is one to grow right
and then I'm going to add an extra 200
pixel fixed with here so no matter how
big or small I get that will be 200
pixel um so let's take a look you can
see when I'm big enough this takes up
half and half of the remaining space
but when I get
small um it should
stop you know the minimum at 100
which I'm
not quite sure if it does but it should
um minimum at 100 let's see if I try
this I do think that because to see if
it's a if if I so it was too small so if
I do 50 pixels you see because we force
this one at 200 um and this one would
say we don't want it to be smaller than
500 pixel that it will just refuse to be
smaller than
500 you can see so what happens is then
now I overflow because I'm forcing my
grid to be larger than the
container let me go ahead and make
this 100
um but you could go ahead and play
around with this and um kind of test out
the min max function and the repeat
function
okay all right so one thing about the
grid layout um we want to talk about is
the explicit grid and the implicit grid
so
um this is basically the ex explicit
grid is defined by the developer which
is us uh with grid template columns and
grid template rows and this means you
manually set the number of columns and
rows however there are when there are
extra grid items that doesn't fit into
defined explicit grid the browser
automatically generate additional rows
or columns to accommodate them so let's
see what this
means so I'll go ahead and save this so
we're done with three let's look at the
explicit let's close out
these so I'm going to go Show preview
and then copy this over into
here all right let's take a look at it
CSS for this one
um you can see I've already set a
display grid onto the containers so
we'll go ahead and let's take a look at
implicit and explicit grid right so if I
take this first container and I set a
grid
temp a grid template
columns and I want repeat let's do three
rows uh three columns at 150
PX okay so what you can see here
is I
specifically uh oh let's do rows for now
so grid template
rows and 150 PX so you could see here
what happened is I set the grid right so
the column is uh one two and three
columns so that's explicit I told this
grid I want three columns however for
the rows I I only set the first row so
you can see that this first three
they're considered the explicit grid um
however these are implicit grids I
didn't actually set the row height for
them so let's take a look at
here so as you can see here
right I set the I set these height at uh
150 150 by 150 however these ones um I
didn't set the height to them so the the
auto height so the but the but I still
have these items are in the grid right
so what happens is uh
um the the browser will fill in these
space and then because I didn't set them
the height would be uh whatever the
content is right so if my content is
this high and then I think I have a
little bit of padding around uh so my
font size 2m and then I do have a little
padding around them yes so you can see
it will be as tall as whatever my um my
content is so if I take away the padding
then you know it's only as tall as my um
content which is just the
numbers and this one it doesn't change
because I
specifically set the
height so it's important to understand
that there are explicit grid which is
what we said and then these are and then
the um the browser will fill in the rest
of these is is there any way that we
could put the numbers on the on the top
boxes in the middle of the boxes
I don't actually know these
are no I mean I'm not quite sure you're
saying can we put these numbers in here
right uhuh
yeah
um I don't see any options to do
that okay it's okay but yeah I mean you
could search online and see if there's
an option to do it but I don't I don't
think there
is
okay but yeah it would be nice if it's
in the middle but
uh
okay so how do we handle the size of the
rest of the rows right so rows or colums
that we did not specify the height
because sometimes you're not going to
know how many grid items you have so you
can control the size of implicit rows or
columns by using grid Auto rows which
defines the height of the rows created
automatically or grid Auto columns or
defines the width of the columns created
automatically
so uh so
again if if these weren't set then they
will automatically be the the size of
the content like we have here so let's
take a look how we can do this
so
um we have uh this let's say we want to
control the rest of these but we don't
know how many rows are going to be left
over so if we go grid template uh so
we'll go grid Auto
rows and we're going to set them at 100
and so now you can see what happens is
uh no matter how many rows I have here
it's going to go ahead and just set 100
to the rest of them so let's say I uh
just go ahead and just add a bunch in
here you can see that no matter how many
rows that are added um they're still
going to be the height of 100 so that's
what grid Auto uh rows will
do so let's see what happens if we take
away the first one now it's going to set
all of them right so you don't have to
set all of the explicit grid then you
know this now everything is implicit
grid because we didn't set any height to
any rows but by using grid Auto auto
rows uh we can set the rest of the
height of
these okay let's see
so so there is a short hand for this as
well um so there's something called grid
autoflow so that's a Shor hand of um how
grid items automatic get placed when
there are unassigned spaces in the Grid
or when items overflow the explicit grid
so grid autoflow so instead of you know
using the slide before where we did grid
Auto rows and grid Auto columns we could
just do grid autof flow and it will have
the row the
column um row dense or column dense and
so um here's definition so the row is
group items are placed row by row which
is left to right then WRA into the next
row column items are placed by column by
column Row D try to fill all the gaps by
back filling smaller items and column
dance similar to row dance but fill gaps
in the column base layout so we're
really just going to uh just use row and
column for now um I'm going to show you
guys
in the second
grid so go ahead here and let's uncommon
out the
C2 okay let's let me close this so you
guys can see a little bit
better uh okay so
C2 if we do grid
autoflow
column so when we do grid autoflow
column it just fills in everything into
the
column see
here and let's
set grid template columns to repeat
2 one
F grid template
rolls okay so what happened here is if
we do grid template columns and we're
going to repeat where we're going to
take up half
here um and then the last column you can
see but okay so what happened here is
let's go grid so we're telling it we're
only want two rows like we're so we have
uh the first row is 75 pixels and the
second row is 100 pixel um and then for
the columns um we are do we want two
columns where we so this right here is
the X a grid and so what it's going on
is it fills in the rest of the grid um
based off of the grid Auto flow so you
can see
here what it's doing is uh we explicitly
uh put this grid
together and because the autof flow is
in column it'll flow so here you know
it's a one two three which is the
default goes by row uh when we change
the autof flow it goes up down so one 2
3 4 and it'll fill in the rest of the
implicit
grid and then let's see if we add
in Grid Auto
column so if we want to want this column
to fill in um not Auto but we want to
maybe do
20% um and you can see then the rest of
the columns will be 20% so you can see
that there are ways for us to to
um
change you know use these to manipulate
how we want the grid to look
so so that's grid autoflow which is
we're changing how we want the grid to
flow um you know normally grid is 1 2 3
4 5 6 now we're going 1 2 3 4 5 6 so
let's take a look in our inspector what
happen happens when we put the layout
on so yeah I mean doesn't really so it's
still the same the numbering is still
the same 1 2 3 and then we have 1 2 3 4
as the line numbers it does the opposite
numbers as
well that's G grid autoflow
all right so that's different ways on
how we can build out our grid um next
we're going to talk about grid alignment
properties but before we do that do you
guys have any
questions on the grid I know a lot of
this will be um a lot of practice in
understanding how each of these can be
put together to work for you um but as
you can see it's very flexible it allows
you a lot more controlled and flex um
because you could grow uh build out en
higher
grid all right great so let's talk about
um alignment properties so grid also
just like Flex they have alignment
properties to control how the grid items
and entire grid are positioned within
the container so there are four key
alignment properties and they might
sound very familiar from flx you have
the Justified content which aligns the
grid as a whole horizontally align
content which aligns the grid as a whole
vertically justify items align
individual items inside the grid cells
horizontally and align items which align
individual items inside their grid cells
vertically um
and so let's start with justify content
it will align the whole grid
horizontally so it controls uh your grid
along the x axis uh where your grid as a
in general will
um will
be so it works when the grid container
is wider than its grid track so let's
just uh pull this in so kind of make
more sense what it what we're talking
about
so uh
oops so let's close this one out and
let's open this
one all right let's take a look at
what's going on here in our
CSS right so we have our
container which we set a height uh first
of all it's a grid um and we set a
height to it and then what we did was we
set a grid template columns in each of
these columns are 80 pixels so you can
see that there's a lot of leftover space
over
here
um and uh let's see what else we have
here okay
so that's it that's to note here that we
do have a lot of extra space and so
let's do this let's see what happens if
we take uh the first two
containers and we'll set a grid Auto
row okay so we're going to set the
height of all of these rows because you
know we only set the columns but we're
going to set the rows all to be 60 pixel
height so therefore you can see now
there's um Extra Space on the bottom as
well so then we're then we can start
using the these justify content and see
uh if our grid is smaller than our
container um how it would work so uh for
the first one we're going to
use uh justify content so if we justify
content
Center you can see our entire grid is uh
in the middle
of of this container so so this works
because because we set a certain width
to these These Are Fixed WID and there's
extra space uh in the container itself
so the items if we want them to be
centered uh we can use justify content
Center and we could try the rest of
these so we have start which is your
default on the left hand
side
and which goes to to the
end and then you have your
um space
between is very similar to
flex
right and then we
have space around again very similar to
the flex box and we'll do space
evenly you can see that it um spreads it
evenly so it's the same idea for the
line content except it's um it says
vertical
position
so if we go to
C2
content and let's do Center you can see
it's centers if this is only if the
height is larger uh the height of the
con the grid is larger than its uh items
inside so we C to start which is
the default end which we'll put it at
the
bottom space
between space
around and space
evenly so what if we do space evenly on
both
sides and you can see we have a grid
that space evenly
um within our container um both left and
right and also top to
bottom so that was justify content and
also align content which is very similar
to X the same similar
values so let's talk about justifi items
so it aligns items inside each each cell
horizontally and it controls the
horizontal line of grid items inside
your individual grid cells let's take a
look here if you go to index could
uncommon
out these
two
so let's take a look what's going to
happen if we take C3 which is this one
and we do uh justify
items
Center so you can see immediately when I
do justify item
Center uh my grid item uh now becomes
Auto with so but let's see what happened
what happened here okay so we are on
good container three so you can see if
I'm in this container so what happened
is my grid is still a certain size
however my content
inside inside my grid is uh horizontally
centered
here sorry horizontal centered yes
that's right so let's see what happens
if we do
start so you can see if this is my grid
I know it's kind of hard to see let me
see if I could choose a different color
oh that's much better okay um so you can
see here in my grid these grid lines
right it's uh the dash lines is the grid
and then just defy the items to the
start end right to the end of the grid
horizontally and I'm and then the
default which is stretch it's stretches
from take the
default all
right same thing with the line items is
the same
idea I'm going to do C4
start let's see now as as the Box
becomes as big even though the grid here
so let's put in this grid like the grid
is uh the size but the content inside
now since we did align items it's now
the size of your content so start we'll
put it on the
top Center will Center
everything and end we'll put it at the
bottom
I'm going to leave it at Center and see
what happens so stretch will be um the
default value here we're going to go
ahead and just leave it at
Center so that is a way for us to um
change the different um positioning of
where our grid content is within the
main content as well as you know within
each cell itself determining how to um
position our content within the
cell any questions on
this okay let's keep moving
on all right so we talked about grid
lines um so grid lines represent you
know uh the start of and the end of
between the column and row tracks so
each line starting from the start of the
track and in the direction of the grid
is number incrementally starting from
one so like we talked about this is grid
uh column one column two column 3 column
one column two and column three and uh
sorry row row line one row line two row
line three row line four um
so when we uh view
this in our layout we are able to see
each of these grid uh number numbering
and why is that important because we can
actually tell our grid where to start
and where to end so
um so what we're going to do here is let
me see if we're on okay so the next Lab
so we're going to um create a grid where
we're actually going to tell the grid
cell um where to start and then where to
end and then there's a shorthand too so
instead of writing out grid row start
grid row end you could just write grid
row start at number two and end at
number four or you could use a span
which means like I want this grid to
span to no matter where it is so let's
take a look how that works
oh okay so let's close out all of
these I'm going to grab this
link all right let's take a look at
what's going on here
um so essentially it looks pretty much
like the rest of your grid right um
except this time we have six and with
just this
one uh that's a different color than
everything else so that you could take a
look that when we target this one right
and I'm going to go ahead and turn uh on
the container so you can see there's one
2 3 4 and one two 3 turn it off for now
so if we
target this first item and we want it to
start a grid row start two
and grid row N three so if we take this
container overlay so we're talking these
are the row lines right we're telling
this we want this to start at row two
and end at Row three so if I do that
grid row start
two uh and then we wanted so you know
it's pretty much implied that ends at
three but let say we type it out uh
end three so you can see what happens is
now this will start at two and it will
end at three this great column it's
great so
um what if we want to move uh what if we
want it to start at grid column start
two and then uh column three so we want
to put it in this
position so we could also change the
column position
and again it's implied that the end is
at
three column and
three right so these are implied so if I
comment them out it's not going to
change where this ends up being we can
see that what happens is in the row
we're telling to start at the row line
two and we're telling to start at the
grid column line too so that puts it in
this position in our
grid um so can we do shorthand yes we
can definitely do shorthand so let me
comment let's comment all of them out I
was wondering how do you comment them
again I've totally forgot how to do that
um yeah on the Mac I will highlight the
ones I want to comment and I choose
command slash which is
um command plus
slash for a Windows I believe your
command is control control yeah
slash okay so I will highlight it or if
you just want it to be just this this
line you could just put anywhere on the
line and they will do it for you thank
you
I have a question uhhuh so um I I think
I'm I'm getting a little confused with
the
positioning and so when like the
exercise that you just did where the Box
wand went like
down
um it
that's why didn't like the rest of them
also like start from there if that makes
sense from here yeah like why didn't
like why wasn't two where six is uh I
guess because it has to fill in the
implicit grid um okay so if I yeah um
because if it's starts here then this
will all be empty space but the grid has
to be filled in right so what it does is
it moves everything else to fill in the
rest of the
grid okay I think I understand now thank
you
okay so let's shorthand this grid
roll
two and uh grid
column and let's say I want to move it
to between three and four so you can
actually do three slash4 and it moves
here so these are shorthanded makes it a
lot
easier to type rather than um what we
have up here
um so let's say we wanted to span two so
I let's change this to
two so you can see what happens is um
I'm telling it in the grid row I want to
start at two and it automatically will
end at three and this will also take up
just one space unless I tell it
specifically where to start so if I
wanted to start at two and end at four
it will span four um and I didn't see
who asked the last question but that was
a great question um what happens for the
rest of these is that they will fill in
the the gaps um the implicit implicit
grid so um the browser will
automatically fill in this grid um
starting from this it always starts from
the one one position um and then it'll
fill this in this because we only have
three columns the six will now be pushed
to the
bottom go ahead is it sorry no go ahead
go ahead
oh I'm going to go ahead and comment
this out also another thing you could do
is use the span um so if you don't tell
it where you start um you could so if I
do grid row and I do span two this see
it automatically spans two
rows and I could do grid column span
two and automatically span two so this
is really cool you could think uh
something times um if you know it just
makes it so simple for you to take
multiple columns um with just a really
simple
CSS
um
properties what I was going to ask you
is that um grid row and and grid row
start are kind of like the same right
because I was playing with it and it
does the same um action pretty
much yeah a grid row is the shorthand so
essentially what it's saying is grid row
is yeah I guess if you don't put the
ending in Grid row so grid row start I
don't think you could put an ending
number but in Grid row you could put an
ending number so like if I were to take
this
right so right now I'm saying grid roll
is two but I can't put it if I do a
slash I like a ending number here
let's say
four right but that's the difference
like grid row start so if you don't put
an ending number it's imply that you
only start at two but if you do put an
ending number then you could control the
end of it but grid row start does allow
like you're not going to be able to do
the SL oh okay so essentially the end
will allow you to do the grid
row like um expand yes so grid row is
short hand or
[Music]
these
yeah so it just it's it's more options
it's like saying and so it's like it's
like saying you could do padding top
padding right padding bottom and padding
left right um you could write each one
of them out or you could use just the
short-and padding so it's kind of like
the similar idea but you
can't you can't do
four four like you know padding and if
you just choose padding top you can put
four values in there got it so yeah it's
more selective when you do that yes
exactly exactly so this allows you to
put in more values um versus like this
one it's very just like you have one
value to put it's not going to read it
you put it St and
end okay
yeah and so here we have grid column
start and grid column end we already
talked about it um and then we have the
grid area which is actually shorthand
for everything right so so
essentially um you know we talked
about you know you could have each one
like grid column uh grid column start
grid column end grid row start grid
column uh grid row end so that's for
values that's a lot of typing or you can
you could actually just do uh grid row
or grid column that but that's still two
values you can actually combine all of
them and you could do so you could do
something called grid area so how it
works is grid area will be row start
column start row end and column end
so if we were to take go back here and
let's comment this one out so let's say
we want to do this one right where we
want it to span from 2 to 4 and 2 to
4 so what I can do
instead of typing all of these out I get
to grid
area
um so we
two
two right four
oops four and that's essentially the
exact same thing as this
one so we
got so let's say we want to go
from
two uh sorry two to four
row and we want to go from 1 to three
right so what if we want to take this
one so we take a row is 2 to four that's
fine so columns
one two three so that changes so you
could shorthand everything too of just
grid area
I have here on my notes that you could
also shorthand even with span so you
could do grid
row uh you start at two but you want to
span
three but that's a cool way of getting
the start and it's like you know I'm
telling you where to start but I want to
span
three and then we could do um R column
span
two it's pretty cool H guys can play
around with this and
um just see uh what will work for you so
this allows you lots of different
options for you to you know move your
grid the way that you want it to move
and you can imagine especially when
you're going from um like a desktop to a
mobile instead of like moving stuff
around or hiding and maybe displaying
some things you could just use the grid
to move things around to different um
different position throughout the
grid so it's a lot more powerful as you
can tell than the flex
box okay um before we move on do you
guys want to take a break or do you want
to keep going
and just put in the
chat see how much we have left
today um we're pretty much close very
close to the
end uh I think we're just going to talk
uh let's
see yeah so grid template area and grid
Gap are very simp uh so template areas
um be quick and then G app is very
simple and then we just have a final
example all right I got one person to
keep going
so
so so what I think is I'm going to get
through at least all of these and then
before the final example if you guys
don't want a break we'll take a break
um but I think that I really want to get
through a little bit more
all right
so yeah let's do a break before the
final example okay so um let's talk
about this um the really cool thing
about grid is this thing called grid
template areas and the grid template
Area Property it allows you to assign
names to different section of a grid
layout and you could use it to organize
and Visually structure your design so
how it works is uh you have to define
the grid area so the grid template Area
Property use a stream based layout to
find named regions so you can name
regions like main nav whatever you want
to name it um and then each row is a
separate string and each name correspond
to a CSS class that is assigned to an
element um and number two you assign the
grid areas to element use grid area name
and CSS to match element to the layout
so let's take a look at what this
actually means so what is here is um for
each section I can name it uh a certain
grid area and then I use the grid
template areas to um set up that
structure right so this could allow me
like very complex structure and then I
could use you know different grid
template properties to uh to assign how
big I want either the rows or the
columns right so for here um what I'm
saying here is I want header to take up
four columns nav to take up one main to
take up two columns one column aside and
then the phoo take up four columns so
let's uh let's take a look I think that
will make a little bit more sense um
once we get into here and see what it
means so
so we're on number
seven let's close out
everything show the
preview let's see what's going on here
all right so I have created like a
structure of let's say of a website so
you have your header your navigation
main aside and footer and right now it
just the say um they're all the same
height as um whatever the content is
inside and let's take a look at the
CSS
okay so there's nothing really on here
other than the body is a display grid
which makes everything inside the body
as you go into index so here's the body
and everything in here are now grid
items okay so what we'll do is we'll
start um by naming each one of these
grid items so I'm just going to name
them so the first one I'm going to name
grid header um so the area name it could
be whatever you want it to be um I like
to name it this way um and you could use
you know initials if you want but I like
to name it this way because it tells me
what this area actually is it makes a
lot more
sense so let's uh
just name each
one grid
area uh this is
me red area this name does uh
Na side
okay so now that I named everything kind
of just disappeared on the side because
I didn't add it to anywhere in the
body um but if I go into the
body and I use uh my grid template
areas oops
so how this works is you do col uh
colon and
then I do my first row so I want
header
[Music]
header header header so I'm saying I
want the header to span um four rows H
sorry three uh four
columns nap main
main side
and in
[Music]
footer okay so I think it's not showing
because I didn't set any template rows
so grid template
rows
um one fraction four fraction one
fraction oh shoot I put this on the
wrong one that's
why put it in their body
here we
go and uh what I'm want to set here is
because I didn't set a height to my grid
um you can see that it just is as big as
um what I set it here so let's set the
body
to
um see 100% will give me
anything no so uh let's do 100 V8 which
stand for the viewport height which will
make my body as high as my viewport you
can see if I close this out so what's
happening here
is so I chose the header and I'm I said
I'm going to name this header right and
I'm going to name this main section grid
main navigation um as
nav uh grid area aside as a side and and
grid area footer and then what I'm doing
is I'm going into the body which has the
display grid and I'm using these
names to set the columns right so I want
the header to span four
columns um and then then not to span one
column main to uh main to be two columns
the side to be one and then further to
span four
columns and then uh what I did was see
what happens if I get rid of these so if
I get rid of this it automatically just
looks like they're all the same same
size but I want this to be uh so what I
do is I'll add them all up 1+ 4 + 1
that's six right so uh the first one
will be one six of the area uh 4 six
will be about 2/3 and then this is one
six of the area so you can see and
another thing what I did was I had to
set the height of the body um otherwise
going to it's not going to take up this
full width for the height I set 100 of
the viewport height here so um you can
see what I did was because I uh set
these grid areas uh I'm uh I set a name
to each one I could use the name to
create very
complex um
complex
um templates so let's say like here I
want a side to actually take two and
Main to only take one and I just
um do this and why a side
on okay so you know
it's because
um the problem uh main content is a lot
larger than the side so it can't be too
much smaller than the actual content
inside of it but
um it gets
smaller um so you can see that this
can't get smaller than whatever the
content is inside of it so that's kind
of a downside to it but if I get big
enough you can see that like um this is
definitely taking up a lot more space so
you could use this method to
um to
a little bit more
complex
templex
okay all right so the last thing is we
do have the Gap property that's very
similar to um the flex Gap so um again
you have the row Gap the column Gap or
just the Gap property itself which is
the row and the column and so so let's
uh pick this do this last lab and then I
will we um do the final lab after this
which will kind of put everything that
we learned
together and uh you'll see it in more of
like a final example so let's go ahead
and take a look here so let close out of
all of
these yeah then I'm going to grab this
one and this a gap is very similar to
flat X
um so let's
see right so this container as you can
see is this display grid already and
what I set here is
um one column where the where the
minimum is 160 and the maximum is 20%
and then I'm repeating uh onef so the
remaining space I'm taking half and half
so this two columns will be equally in
size so this is a three column grid they
come in and out you can see it doesn't
get smaller than 160 over here um and
when it gets larger it will get larger
than
20% okay so what I want to do here is if
I want to add
just a gap of 20 pixels so now it adds
um oops it adds the gap
um one thing to know about the Gap it
doesn't add it outside here it only adds
it in between each of these similar as
Flex box um and so when I do 20 it just
automatically does 20 on the column and
uh 20 on the row if I want to do I can
separate them so I'm going to comment
this one out if I want to do roll
Gap uh 20
pixels you can see here automatically in
my roll add the
Gap and you could do column
Gap uh P pixels and so you have 20 and
10 or you could
[Music]
shorthanded right shorthand for this one
is the same Gap 20 pixel for the uh roll
and
10 oh and that's it for everything and
then uh let's take a
minute I don't want to take too long of
a break with a 10 minute 10 minute break
be too much we could do a five minute
break and then we'll talk and then we'll
come back and do the final example so a
little bit more let's come back at 8:20
so um 8:20 we'll come back and
um we'll start off again and we'll
finish example and then we'll get into
our teams
all right I'm back guys all
back
yes
yep all right so I wanted to
um uh before we start the last one
there's a little bit more in the grid
that I want to talk to you uh talk about
um so uh this is justify self align self
and order so it's very similar to
flexbox when you justify yourself you're
telling um the property itself instead
of the entire everything um aligning a
certain way you're telling a
certain um certain grid it
how to align uh specifically the
horizontal alignment in the item so
that's justify self um and again it's
the same as if you do justify item um on
the container which is Start Center end
and stretch and then we have align self
which is the vertical alignment of an
item and start Center end and stretch um
and the last thing and we will show this
in the last example is order so you
could tell the gri item where to order
to um so for instance a default value
for everything is zero so if you uh a
higher value will appear later in the
grid and a lower value will appear
earlier so for instance and you can do a
negative also so the default value is
zero if you order something that's a
negative one it's going to go to the
beginning of the grid uh anything higher
it's going to go uh later in the grid so
um let's do this last
and you guys can see my screen right
want I make
sure awesome okay sometimes I can't tell
usually there's a green outline but
there's no outline sometimes
um all right so let's go to lab
n and let's take a look at this lab
so I'm going to again hold my my Chrome
to the side here and I will uh grab the
preview of
this close this
out um and let's take a look what's
going on here right so we have this
index and it's very uh simple so we have
our section and we have our body and in
the body there's one section and this is
our container um in the section there's
a header which put the H1 horses we have
our main uh and in the main we have two
figure elements so we have um in the
figure we have an image we have a fit
caption and then we also have uh a
paragraph and we have two of these going
on um and then we have our footer right
here on the bottom
um so in this style you can see we have
uh just a header there's a text Aline
Center and we put a background color on
there um and we added a background color
to everything in the main area here so
we used Main and then this means
Universal so everything under main um as
a child uh it's going to have a
background color uh the article
uh has a font style metallic and a
padding of 2
RM
um which doesn't look like it's
affecting right now but the image has a
max width of 300
pixels uh which means it can only be as
uh as big as 300 but then 100% to fill
in that 300 WID uh and I said aspect
ratio of one which means that they're
squares uh the
figure which
is uh
let's see here which is this entire area
has a padding around it uh and a margin
of zero a fit caption which was this we
added a background color font weight
bold align the center and then we added
a height to
it uh for the paragraph we added a Max
width of 300 margin Auto to center it
and then also some padding up and down
and then we have our footer where we
added a background color
a texal line Center and then a padding
of one RM so the goal here is we are
going to use grid to
um to uh set this up in the positions
that we want it to be so
let's start so we're going to start by
taking this main which is this entire
middle section
uh and then we're going to do display
grid which as you can see display grid
doesn't do anything except it creates
everything in the
main the direct children of main will
now become
um grid items so if I go into
inspect and you click main so you can
see uh under the layout if I click Main
um which is this area you can see then I
have my grid here can see the grid
lights are very difficult to see
here really dark okay so then you can
see you have my grid which is uh the
first figure here the second figure here
and then on the bottom I have my
article
okay and uh I want to set some uh
columns and rows
so I'm going to do a
grid template
columns and I'm going to so what I want
is um two columns and I want them to be
equal uh with so repeat 2 onef FR so
then now you can see suddenly I have my
um grid side by side
and I want uh three
rows great template
rows
repeat so I'm setting the explicit row
but I'm going to set them as Auto
height so it will just be the exact
height as um the content
inside you can see
here so the first thing I want to do is
um I want this article to span uh my
grid uh two columns so I'm going to go
here where it says main article and I'm
going to
set a grid column I wanted to span two
columns close this out so you can see
because it doesn't
live okay so that's great I I C uh my
grid and then what I want is I don't
want this on the bottom I actually want
this at the top so what I'm going to do
is I'm going to uh set an
order and remember all the order for
everything default is zero so if I want
it to be above everything else so
imagine this is one this is two and this
is three if I want three to be above one
and two and these are order Z 0 I just
do a negative
one and that's going to move my article
to the top
here so what I want to do also
is
um you could do a grid within the grid
so I want these to be grid also so I can
go ahead and U manipulate the different
um their positioning and stuff inside so
uh these are the figures so I'm here in
figure I'm also going to change it to
display grid so let me show you before
and after so if I inspect here right
right now I only have one grid and this
is on the main there's no grid on this
at this moment so if I take the figure
and I do display
grid you see suddenly and you know I
could so I have two figures so let me uh
uncheck the name so you can see what's
going on here so suddenly these have now
become grids as well
um and I want all the content to be
centered you can see that it's kind of
weird that this is uh left the line so
I'm just going to do justify content
Center so when I do justify content
Center um suddenly this this um is only
as big as um everything is as big as the
largest size item which is the 300 um
and that kind of it fixed the issue that
we had overflowing with these being
bigger than the image
and then let's do grid template
rows uh I'm going to do
auto so we want to set two of
them um one so we're going to just set
the grid template rows for now um so
what I want to do here is I want this
um big caption to um
overlay this um this image right so I
want to Overlay it on top so what I want
to do here is I'm going to select both
the image and the
figure sorry fit caption the image and
the Fig so the image and the fit caption
so if I come here and I do image comma
fit
caption and um
actually let's take this off for now so
if I want them both to be the
same uh I could do a grid
row starting at
one and ending at two for both of
them and then I want them both to have
the grid
column to start at one and end at
two and you can see that it overlays
here it's great
um I added this here to set up the
explicit explicit row
um so you can see if I didn't set it
then um it adds a little Gap here but if
I set it in Auto it it I'm telling it I
want two rows um you know I don't want
them to implicitly add rows um I want
this one to be Auto sized and I want
this one to take up the rest of the
space that's in here and so I have this
overlay um except that this fit captions
at the top I don't want it to be at the
top so I want it to be actually at the
bottom here so uh I have here F cap
we're going to use the Align celf so
we're going to tell align cell because
we have we can't use align items because
there's two things in the same cell um
so we're telling the fit caption to
align
self and align self remember it's the
vertical alignment versus if we do
justify self it's the horizontal and we
want it to be at the end so you can see
that push it to the end overlay
here
okay
so let's see
I have also
[Music]
here see I I have a note to do let's see
if we do um main
paragraph align self start where is
that that doesn't really do anything
know why I have that let's see
height okay so I think I was having an
issue here with um with them being
different so I guess that's why I added
it
okay so you see here that um right now
the text are um kind of different
heights right because this one has a
little bit more text than this one and
so you can see the gap between these are
different so I wanted them to both be at
the top uh of each one so I wanted the
paragraph to also be a line self um and
so I added a line self to the start to
make it at the top of it uh and I had to
set a height to the grid cell in order
for it to actually align
um and so but then I wanted a bit more
gap between the top and the
[Music]
bottom so I added a gap one
R oh actually so I added a gap just to
um see okay so I wanted to show you guys
what the Gap does so if I add a gap
inside this Main it added some space in
between each of these section here so
um you can see here if if you know if
these were boxes that
were smaller and you wanted to add some
space in between the boxes you can add a
little Gap
there and that's it any questions on
this how
to use Gap or I mean use uh grid so it's
a lot of uh different properties um that
you could use to um you know just
uh position things and just a lot easier
that you know stuff that you use float
or you use like negative margins or
things like that it's uh it can get to
be a lot of cod versus it's a lot
simpler this way to be able to adjust um
different spacing and how to get these
uh grid items to show the way that you
want it to
show all right so for this week uh we
just have um let's take a look what we
have this
week so uh we are done with layout and
positioning starting next week we are
doing uh responsive web design uh so
we're going to so there's a quiz this
week for CSS layout and positioning um
there is one assignment and there's two
parts to assignment the first one is
just a couple different exercises for
you to practice the different grid
layouts um and there's a couple
requirements as well as there is um
images of how your grid should end up
looking like um so there are three
different exercises for you to just
practice these grids uh in part two
we're going to be building out the
community community page um so you are
provided uh starting code and the idea
is to use grid um to to create this
layout specifically um in the community
page and again we're not doing
responsive design just yet so it just
has to look this way on desktop and you
don't have to worry about how it looks
on
mobile any questions