Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Concept: Grid layout
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's talk about the grid layout concepts really quick in review here. So we saw this grid layout with some very egregious styles
0:10 to make the grid elements in the borders and stuff stand out super strong. As you saw on the training site
0:15 none of this actually shows up unless you want it to. Right, it's more about controlling your content like here as a teaching tool
0:21 gray with grape order is what we get. And what we do is we define various rows each row has 12 slices and those can be broken into:
0:31 three elements of four or 12 elements of one or two elements of six as you can see. We also specify the size:
0:37 small, medium, large, extra large things like that. And in HTML it's super easy. We have a container - the container has rows.
0:44 Each row has divs of classes of column minimum grid size and then the number of columns each one of these represents so call medium eight.
0:54 So here you can see there's column medium eight and there's column medium four. I also said I'd give you the exact numbers
1:01 for what define small, medium and so on. Things that are less than 576 pixels are defined to be extra small between that 576 up to 768 is small
1:14 then medium starts there and large at 992 and beyond 1200 that's extra large - definitely call that an extra large display.
1:23 So, here's the actual numbers that are used to define when these grids break from grid tabula style into horizontal slices stacked vertically.
1:33 That's it. Totally recommend using the grid layout. It's very easy and very very helpful especially if you're going to support
1:40 things like mobile devices and why wouldn't you support mobile devices right?