Okay, so I know each grid in the cell is going to be a div,
we're going to surround that in a div and I have some code prepared for
inside of each grid cell and I'll go ahead and copy and paste that right here.
Let's remove that space right here.
So, let's go over it real quick.
So, we haven't really assigned any columns yet to this grid but
this it going to be the content of pretty much every single grid.
So, number one is, we're going to have a HHREF to single-category, HTML.
So, single-category.HTML is really just going to be a generic page that we
haven't even written, yet but it's going to point to that particular
category that's going to be identified by this div and by this picture.
So, each category is going to have a anchor tag pointing to a single category
that HTML, which in this place is just a placeholder page, and in the future will
be actually a designated either a page or we'll see how that works with JavaScript
we'll be basically designating a place that will show this particular category.
And inside of it we're going to have a div and
a div is going to have this class called category tile.
Obviously, a custom class that we've created and inside of it we're going
to have an image of 200 by 200 and this is something that we've sized before.
And the image source is going to be in images.
And actually that's probably the wrong path.
So, let's take a look at images.
Is going to me menu and at this point let's just pick something like B.jpeg.
So, it is images, then menu, then /B
/B.jpeg and let's save that for now and we'll call this particular category lunch.
Even though I don't think that's what it is.
But, at this point it doesn't really make any difference we're just styling each of
these categories that they should fit in the page, and
then we will fill in the actual data later.
Okay, so far so good.
Let's go ahead and preview it in the browser.
And obviously, we can see the picture, and lunch is somewhere to the right,
and things are obviously not styled 100%.
Okay, let's go ahead and copy this whole div which is going to be our grid cell and
let's paste it a few times.
Basically paste it three, four, five, six, seven, eight, nine.
Let's say that's good enough.
Now, we actually have a grid.
And they're all going to be really the same the only thing that's going to be
different about them is where they're going to be pointing in terms of the URL
in the a HHREF tag and where the image source is going to be pointed but
other then that they're going to be all the same.
So, let's go ahead and start styling our grid.
So, what we wanted to do is we wanted to have six of these things basically in one
row and then, whatever doesn't fit should go ahead and spill over to the next row
not technically a next bootstrap row but just the next row visually.
Som how do we accomplish a six cell layout?
Well, that means that each cell is going to have to cover two columns.
So, let's go ahead and do that.
And we probably want the six category layout even at the medium size screen so
we'll do column md and 2.
So, if that's going to be the case, that means this is going to take 2.
Let's go ahead and copy that, and we'll just insert it into every div.