Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Adding to the grid
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's open up that grid HTML file over here in PyCharm. We're going to dig in real quick and just see what it's like
0:07
to actually write this grid layout. It's super easy to work with. So the way it works is we have a div here that is a container.
0:15
Within the container we have a bunch of rows. Within each row we have some other elements some other divs that are broken into columns.
0:25
Now, the rule with the grid layout is that you have to have 12 columns per line. Either it's 12 across, or it's all broken vertically
0:34
as you saw, right, when it gets too small. So here, for example, we have one that's eight and one that's four, and that adds to 12.
0:41
Here we have 12 that are one and if we open up this one here you can see we have three that are four. All of those combine to being 12 total segments.
0:52
So that's pretty much it, it's really, really simple and then just put your content in here. And the content we had was just
0:58
the class name for each section so that it was really easy to show you and you can play with it, and so on.
1:04
Let's go through this and add one more real quick. Come over here and add a little header for each part.
1:09
We're going to save the old section and generate a new one. Original section. Now here we'll just have another one. Just hit Tab to expand that.
1:17
So we can do section. So the way we're going to do it is we're going to have a div which has a class container
1:22
containing multiple, potentially multiple, rows in each one of those rows, some number of these columns that add up to 12. Now, they could be uneven
1:33
or they could be totally even, like this. Now, PyCharm has this really cool feature called Emmet, or Zen Coding
1:40
or we can use CSS-style shorthand to generate this stuff. Sometimes its helpful, sometimes it doesn't help so much.
1:47
But if I had a div and I wanted to say this has a a class container, in CSS I would say .container and then if I wanted to say it immediately contains
1:55
I'd say arrow, and I'd say a div was class row and then it immediately contains a div let's say col, medium, four
2:05
and I want three of those, so you can say times three. If you hit Tab, check this out. Sweet, right? Thing one, thing two, it even
2:14
navs you through the little section there. So let's go ahead and see what this looks like now. So now we have our new section.
2:22
Thing one, thing two and thing three and because we chose medium, it's going to wrap when it gets down to medium sized stuff.
2:28
Let's add one more bit here just to show you what we can do. We'll have a row, and this time we'll have some small sections.
2:39
Let's have one, just put one, four and then what do we need for the balance? Seven. Here we go, one, four and seven
2:51
and you can see how we can break this out and make it a little smaller. Because it's small, it hangs onto its grid
2:55
a little bit longer, and then it breaks out. So there you have it. Super easy to use this, right? If you can just drop in a container with some rows
3:03
and then add the column values and of course in PyCharm you get sweet auto complete on that. A little rmg, you can flip through
3:10
those extra large, small, and so on. That's all there is to this grid layout. Pretty easy to implement, you don't need any Java Script, it's pure CSS
3:19
and it really makes laying out your page in interesting and yet mobile friendly ways, really nice and easy.