The Column-Drop Design Pattern
The column-drop pattern is used to a grid-like layout where each row has its column layout.
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.
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.
[00:00 - 00:20] Welcome back. We're now going to talk about the column drop design pattern. Now the column drop is when we have a set of elements that need to be displayed in even columns, but when we run out of room in the inlet direction, we want it to wrap to a new row. Now in each row, the column count will be independent from the previous row above it.
[00:21 - 00:41] As you see here, we have five items of content. Three of the items can fit on one row. So we have three equal columns, but on the next row, since we only have two items, we only have two columns as we drop to a new row, the columns become independent of the row above it.
[00:42 - 01:09] Hence that's why it's called the column drop component. Here's an example in the wild. You see here that we have each one of these avatars are taking up a unique set of columns on different rows that they're on. Now in this case, each column is not taking up the entire width. They're only taking their individual space. They're not centered inside this content, but this is still a variation of that concept of a column drop.
[01:10 - 01:29] So let's go to our example page. Let's scroll through here and then I want you to identify examples of the column drop pattern. So in this application, we have this right here, this little box, and this is an example of the column drop pattern in use.
[01:30 - 01:43] And in this case, this is the only example. I want you to keep an eye out for this in your web searching as you go online and notice it. And we're going to talk about one more design pattern in the next class.