Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Intro to grid layout
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Before we get into the grid layout and working with it in Bootstrap I think it's good to see it in action. And what better place to see it in action
0:08
than the Talk Python Training site. So here's Talk Python Training, circa 2019. And let's look at a couple of things.
0:16
So you can see here, some interesting grid stuff happening. It's kind of like a table, with three columns. But it's not a table.
0:22
Tables are bad ideas in web design unless you actually have tabular data. So here's something that looks like a table with three columns
0:30
but actually is a grid layout. Here you can see some of the selling points of the courses learn online, lifetime access and so on.
0:37
That's also this sort of three column thing going on. If we change the size of our viewport here then as we shrink this, you'll see that eventually
0:45
it will get small enough and that happens pretty soon maybe too soon, but that's okay. Eventually the layout will decide
0:52
this is too compact to be columns and it should instead break into three vertical slices. So as we shrink this here, you'll see it's done that already.
1:02
As you get it smaller, the images actually shrink. Something like this. So now, we're in this phone mode here where these no longer are columns
1:11
but have been wrapped into sort of vertical slices. The same thing happens down here. Right now it's like this, but eventually
1:16
as it gets a little bit bigger trying to keep it in line here It's big enough it decides oh we have room to put these side by side.
1:25
So that's the grid layout in action right there. Now another thing that's pretty interesting although I did just notice at just the right resolution
1:33
there's a little bit of a glitch. Up here, notice that we've got a bunch of stuff. We make it full size, we've got course, apps
1:39
pricing, business, and so on. But as it gets smaller, we might not have room
1:44
for all of these things, so we also have some responsive design going on here. Notice that the podcast goes away
1:49
as soon as we start to run out of space. My resolution is pretty small so that happens pretty quick even though it's wide on my screen.
1:56
So if I keep going smaller and smaller there's that little glitch and before it gets totally small
2:01
it decides eventually, hey there's not enough room here so we're going to turn that to this drop down menu, like so.
2:06
Now, that is a Bootstrap responsive layout thing nothing to do with the grid. Also, you might have noticed down here
2:12
as we change the size of these things the actual images themselves were changing size. Also not part of the grid layout
2:19
but Bootstrap's interaction with the grid layout. So, if we look at this, for example you can see this has the two classes image and image-responsive.
2:32
That tells Bootstrap it should basically take up as much space as it can in the container and it'll be shrunk down as it interacts with the grid.
2:39
Right, so you can see as it gets bigger and smaller that's the responsive bit. Okay, so this is the grid layout.
2:45
It's really, really nice for putting together sites that look good on desktops, but also on mobile browsers and various resolutions.