Angular Material Tutorial - 14 - Grid List

all right let's take a look at the

material grid list in this video the

grid list is basically a two dimensional

list view that arranged ourselves into

grid-based layout now the first step is

to import the module so in material

Mario Diaz import mat grid list module

and added to the material array map grid

list module now we can create a grid

list the component is mat grid list and

this component requires a calls

attribute which specifies the number of

columns in the grid let's go with two

columns so calls is equal to two as

children to this component we specify

math grid tile components

title 1 and similarly let's create three

more also to be able to clearly see the

grid let's add a background color to the

tiles so in the CSS file Matt grid tile

background color light blue now if we

save this and take a look at the browser

you can see the grid with two columns

and two rows the question is how did it

create the two rows for a grid we always

specify the number of columns and the

number of rows is determined by how many

columns we want and the number of tiles

specified since we have 4 tiles and two

columns it can fit only two tiles in

each row

hence it creates an additional row to

fit the next two tiles if you were to

have five tiles there would be three

rows so the number of rows is determined

by some basic math of course you can

also specify how many rows or columns

each tile should take up that can be

specified using the row span and called

span attributes on tile one if I said

row span is equal to two and take a look

at the browser you can see that it takes

up two rows instead of one similarly if

I said call span is equal to two

you can see that it takes up two columns

instead of one when specifying call span

though you need to make sure that it

does not exceed the calls attribute if

it does it throws an error all right

next let's talk about the height of each

row in the grid by default the height of

a row is equal to the width of a column

however you can override this using the

row height attribute and you can specify

one of the three values the first one is

a straightforward value so row height is

equal to a hundred pixels take a look at

the browser and you can see that each

row will be a hundred pixels tall the

second option is to specify the row

height as a ratio with respect to the

column width

for example row height is equal to 2 is

to 1 this implies that the row height is

1/2 the column width if the column width

is 200 pixels then the row height is a

hundred pixels take a look at the

browser and you can clearly see from

each style that the height looks half

the width the third option is to fit the

height based on the container so row

height is equal to fit but this time we

also need to specify a height for the

container so style height 200 pixels now

if we take a look at the browser the

rows are fit into the container height

of 200 pixels so each row has a height

of 100 pixels if there were four rows

each row would be 50 pixels so as to fit

the total container height of 200 pixels

all right the last attribute I want to

discuss on a good list is the gutter

size that is spacing between the tiles

we can specify gutter size using the

gutter size property let's go with

gutter size

is equal to 10 pixels if you save the

file and take a look at the browser you

should now see additional spacing

between the different tiles all right

that is about the grid list in angular

material thank you guys for watching

feel free to subscribe I'll see you guys

in the next video