YouTube Transcript:
COMM 672 3-13-25

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

AutoDub

Understand YouTube Foreign Videos

Immersive YouTube Voice Translation

Break language barriers, embrace global quality content

Solve Foreign Video Barriers Instantly

Video Transcript

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

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

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

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

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

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

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

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

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

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

okay but yeah it would be nice if it's

in the middle but

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

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

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

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

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

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 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

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

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

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

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

mobile any questions

Click on any text or timestamp to jump to that moment in the video

Most transcripts ready in under 5 seconds

One-Click Copy125+ LanguagesSearch ContentJump to Timestamps

Paste YouTube URL

Enter any YouTube video link to get the full transcript

Most transcripts ready in under 5 seconds

Get Our Chrome Extension

Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.

Add to Chrome — Free

Works with YouTube, Coursera, Udemy and more educational platforms

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube

←

→

↻

https://www.youtube.com/watch?v=UF8uR6Z6KLc

YoutubeToText

←

→

↻

https://youtubetotext.net/watch?v=UF8uR6Z6KLc

YouTube TranscriptPreparing your results…

YouTube Transcript:COMM 672 3-13-25

AutoDub

Video Transcript

Paste YouTube URL

Transcript Extraction Form

Get Our Chrome Extension

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube Transcript:
COMM 672 3-13-25