The Grid Design Pattern
The Grid pattern creates equally spaced columns that persist across rows instead of the column-drop pattern, which does not.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo 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.
Lesson Transcript
[00:00 - 00:07] Welcome back everyone. We're gonna talk about our final design pattern in this lesson, and that's called the grid design pattern.
[00:08 - 00:24] Now, the grid design patterns when you have a set of elements that needed to be displayed in even columns and then wrapped to a new row when there's no more available space. Now, unlike the column drop component, we want that column count to be consistent across rows.
[00:25 - 00:38] If this was the column drop component, we would have two columns of equal amount. But in this case, we have three columns still, but because we only have two elements, this third column remains empty.
[00:39 - 00:44] So I found this in the wild. This is an example of the grid pattern in use.
[00:45 - 00:59] We have equal columns, but because we don't have enough items for this final column, it will remain empty. So let's go back to our example applications.
[01:00 - 01:11] I'm scrolling through here, so you can get a look at that. And I want you to pause the video, look and identify grid pattern in use, and we'll be right back.
[01:12 - 01:18] Welcome back. So, an example of how the grid pattern is being used is this section right here.
[01:19 - 01:30] We have these items that are in a grid, and they're taking up in amount columns. But if we were missing content for this section right here, this would have stayed empty.
[01:31 - 01:40] So that's the design patterns. In our next two modules, we're gonna be focusing on how to implement these design patterns in CSS.
[01:41 - 01:51] First of all, we're gonna be focusing on CSS grid and how to implement these design patterns using CSS grid. And then after that, we are gonna focus on using CSS Flexbox.
[01:52 - 01:58] So thank you for reviewing the design patterns so far, and I will see you in the next module.
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.
Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
