Other Layout Techniques

Other layout techniques complimentary to the design patterns discussed.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the Mastering CSS Layout course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Mastering CSS Layout

  • [00:00 - 00:06] Welcome back everybody for this final lesson in this module. I'm going to just give you some other layout techniques that you should take into consideration.

    [00:07 - 00:21] First of all, I definitely recommend when it all possible defying your gutters in advance. Most of the time we're working in some type of style guide or design system and we have our spacing already predefined for us.

    [00:22 - 00:33] Go ahead and define that using your CSS and that gives you the flexibility to use the data attributes to quickly implement that without having to use the inline styles. Same goes for sizes.

    [00:34 - 00:49] Oftentimes we have some predefined sizes like size, content one, two and three. And we can use those inside of those components where sizes matters, like the grid, the column drop or the center, or we're defining maximum or minimum widths.

    [00:50 - 01:00] And if we predefined those, it makes it easier to implement. Now oftentimes you can combine these design patterns together to achieve the results you want.

    [01:01 - 01:13] But sometimes you still need to create one off layouts. I still recommend try use the patterns and then don't be afraid they'll be create one off layouts using one of those patterns as a starting point.

    [01:14 - 01:31] So oftentimes it doesn't fit nicely into one of those patterns, but it fits maybe 80%. So use that as a starting point and then work from there. Those are the design patterns and those are my layout techniques that I recommend that you implement with those design patterns.