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.

Talk Python's Mastodon Michael Kennedy's Mastodon