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?