Check out a free preview of the full Design for Developers course
The "Layout Q&A" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:
Sarah answers a question that leads to covering topics like nested grids, layout approaches and thinking design updates.
Transcript from the "Layout Q&A" Lesson
[00:00:00]
>> Sarah Drasner: There was a question from the last section which was whether or not you could nest grids inside of each other. You totally can. It's actually a really good idea to, especially if you can imagine, let's say you have a layout that's a kind of interesting dynamic composition but in one of those areas you have a grid of photos or something like that.
[00:00:20]
That's totally a great time to use a nested grid. Just like I mentioned you can put Flex Box inside a grid, you can also put grid inside of grid. I would say that if you can try to draw, unless it's a situation where you have these kind of clearly defined reasons why, you maybe should try to make one layout with one grid first for the reason that as a maintainer, looking at nested grids might be a little bit complicated, especially as you're diving into the code.
[00:00:51]
So always having a mind towards you maintaining your code or someone else maintaining your code. What makes logical sense since you're looking at them. And certainly you can document in other ways. But it's just a good thing to keep in consideration how you're gonna update it in the future.
[00:01:10]
What happens to that grid when people change the rules on you when people decide that they need to change the design. Is it easy to update or does it become really unwieldy? And there's definitely points where a nested grid would actually keep it from being unwieldy too, right?
[00:01:24]
There are times when that would make a lot more sense, so just keeping those things in mind. Cool.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops