Introduction to Layouts & Grids

[00:00:02]
>> Sarah Drasner: Let's talk about layout, layout is gonna be our longest section. So as we work on layout and you're like, this section is taking forever, not all sections are gonna be this long. But layout is probably one of the most important concepts. So we are gonna spend a bit of time and give you some background here so that you know how to create beautiful layouts.

[00:00:21]
Both from the design side and then we're also gonna do stuff with code and talk a bit about CSS Grid. So why do we talk about grids when we talk about layout? Well, it's kind of an old concept, actually, this is not a new thing, using grids for layout.

[00:00:39]
So we're gonna do a lot of designing with grid systems today. One of the reasons why is it kind of brings order to chaos. When you're constructing a bunch of disparate things and putting them all together, it really helps your mind focus and navigate a space if it's laid out in a grid.

[00:00:58]
You can see this in things like ancient city planning. We've always kind of, as humans, thought of things, organizing things in systems of grids so that we can go find them, right? It's a lot easier to go find someone's house if you know where it is on Avenue A, Street 1 than, I don't know, wherever.

[00:01:15]
I used to live in the Greek islands, and that is definitely like, you live wherever, and [LAUGH] you just find your way around. And that's the charming part, but also this is the reason why we've kind of moved towards more organizational data for these types of systems. It's also so that we can kind of play around with the base concept of the entire layout with just a few blocks.

[00:01:40]
Rather than figuring out everything at once, instead of taking a design and understanding fonts and colors and where everything goes and everything, we're breaking it down into steps. You only think about the layout, then you only think about the color. Then you only think about the photos, then you only think about the fonts.

[00:01:57]
Things like that, it helps your mind kind of compartmentalize and problem-solve.