Subscribe or Login to watch video

Login or Subscribe to watch video

19 - Why do you need a 12 column grid in Adobe XD


Questions & Comments

No comments

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hey there, in this video we're going to talk about why we're going to create a 12 column grid. If you already know why you need a 12 column grid you can skip to the next video. For those who don't, let's get started.

First up is, why we're using the 12 column grids? If you don't know, when you are coding a website on the other side-- we're dealing with the design, the front end designs right now. When it actually has to get turned into a website what will often be used as a frame work that uses the 12 columns as its structure. Why are they using 12 columns? It's just a handy number because, for responsive design, say this website here I'm using, it's about 1200 pixels across and I've got 12 columns as the underlying structure. This image here, this slider here is actually spanning all 12 of them, but these guys down here are actually spanning three each. So 3+3+3+3+ equals 12, I think. And that's how often websites are done. Not all of them, so check with your developer, but most of the time it is.

The reason it's useful is that, when I'm at this desktop size I've got this kind of structure that needs four across. When I get down to tablet you'll see that I've decided that these boxes now span six of the columns. So 12 is just dividable quite easily. So when we're working with these different sizes, like Mobile, these actually span 12 now. And encoding is really easy to work that logic. Plus a lot of the frame works that people start with, building sites are based on these 12 columns. That's why we need 12 columns.

Do you need them in your XD Project? No. So we're going to do it to make it easier because mainly I do the web design on the other side, so the more HTML, CSS side things. So, yes I want to do it, because it's going to help me out. You could be annoying to your designer and developer and just design anywhere, and for them to have to try and make it fit in their 12 columns, which would be a pain. All right, so hope that helps you understand why we're doing 12 columns. Let's jump into the next video, where we actually make it.

ALL ACCESS: $12 per Month + Cancel anytime