Layout Grids

[00:00:00]
>> All right, let's talk about something that makes constraints even a little bit more powerful, which is this idea of a layout grid, right? There are, I guess, three kinds of grids technically, but like two of them are roughly the same. So we'll say that there's two kinds of grids, one that we're gonna use and one that we're not going to use, so let's talk about the one we're not gonna use first, just get out of the way.

[00:00:23]
So I can grab any given frame, and I can go ahead and go to layout grid, and go ahead and add one. And I could get a literal grid, where I get pixel perfect designs, I have a size of 10, I can resize 32, I can do whatever I want.

[00:00:42]
This is great for making icons, this is great for arranging stuff for like a graphic, this is not how the web works, generally speaking, right? Like, when we think about a grid system in our CSS, we don't think about literal, snap to this part of the grid and stay there forever.

[00:00:59]
We think about like, I got some columns, I got some rows, roughly they should be, like 15%, or maybe a certain number of pixels in between each one. They should be responsive, when we think about a grid system, we think about responsive design, right? So we wanna do something similar, so just putting a grid it's not gonna give you totally what you want, luckily, this is a drop-down, hey, look at that, there's columns and rows, right?

[00:01:27]
And in here, we can go ahead, and we can switch this, and we get something that looks more like what we think about as web developers when we think about a grid system, right? So here I can say columns, my hypothesis is like, on native mobile apps, like the toolbar is usually like five icons and stuff along those lines.

[00:01:47]
That's why it defaults to five, as a web developer, the table I work on right now is a five column table. So like everything I'm saying is wrong, but I also despise it cuz I have a 12 column grid and that's fun, generally speaking five is never the number that I want, right?

[00:02:03]
A 12 column grid, an eight column grid, any of those are fine, so let's give ourselves a 12 column grid. This color is not a permanent color, this color is just so you can see the grid, if you had multiple grids you can give them different colors if you want, I don't care too.

[00:02:20]
You have a bunch of different options, I'll play with this in a second, and then, so I don't want 15 columns, I want 12. And then the margin is, to the left and right of the entire grid system, how much should you have? So in this case, we'll say give me like, I don't know, 32 pixels on each side, right?

[00:02:41]
So now we've got some space along the edges of our web app, and then the gutter is the space between each column, so this case I'll say 16, right? And you can see that that is roughly a grid that we might see, from either one that we wrote ourselves, or if you pulled one from like Bootstrap or Tailwind or something along those lines.

[00:03:03]
The grid system that kind of comes out of the box with one of those, let's look at some of the other options stretch does the responsive design thing that you think it should do, right? Which is cool, you said you wanted 12 columns, I'll make it 12 columns that will all be proportional.

[00:03:22]
If we take it off of stretch, we can say center which point we can define an actual width, right? And so here we can actually say, I want just the set of columns right in the middle, I don't care if they expand or contract the page. You can also nest frames so like, theoretically your 12 column grid might get real growth on a one of those like super widescreen monitors, right?

[00:03:45]
But you could also have like a frame that's constrained to the middle that has a 12 column grid and kinda get the best of both worlds, right? The same way that you would do it as you implement it in the browser, so most of the time, we're gonna use stretch as web developers.

[00:04:00]
And yeah, that's, that's that grid there, obviously, rows will do the opposite as well. The kind of cool thing though, is depending on what you're building, like sometimes you think about like CSS Grid, where you've got rows and columns, so, guess what you can do? You can add more than one grid, you can add as many groups as you can stand, really, so you go ahead and hit rows, and, so now I can have like a responsive grid that I can put things on.

[00:04:32]
So, I can also make rows and this kinda gives us the responsive grid that we might know and love, that we might implement ourselves. So yeah, you can layer out as many groups as you want, again, I can change the color of this is not a thing that's going to show up in my design.

[00:04:47]
It's just like whatever helps you visualize whatever's going on is a thing that you can do. Okay, but you're like neat, I have a grid, but I would like to see my colors now, please. You have a bunch of options, you could go and like open and close the eyes manually, that's useful if you just want to turn off one for a second, they still exist like there's object permanency to your grid.

[00:05:10]
You can turn off viewing the grid, the grid still exists, even if you're not looking at it, but you might want to see some stuff. The other option is, you can literally just like, turn on and off all the grids, all right? So I can hit Ctrl + G on a Mac, and like see or not see the grids, the bad news is if you are on Windows or probably Linux, it is not Ctrl + G for grid, it is Ctrl + shift+ four.

[00:05:38]
I'm sorry.