I use Toolset all the time. One thing that constantly annoys me is when I need to create a simple grid loop. For some reason, Toolset loves to stick with tables as a grid format, unless you’re using Bootstrap. Well, I don’t want to use Bootstrap. I use Genesis.
So here’s a simple way to get your grid loop working with Genesis and any other theme for that matter.
What Views Gives You
When you go into views, and you’re getting ready to create a loop, you get the options of “Unformatted, List, Table Grid, Bootstrap Grid, etc.” Bootstrap grid, however, is blocked out because it knows that you’re not using Bootstrap. You’re damn right I’m not! (I like bootstrap, but I use Genesis)
So when you select the table grid, here’s the mess that Views gives you.
Let’s fix it and use the classes that are already included in the Genesis Framework.
Yay!! Now it’s clean. Here’s a quick explanation of how this grid works.
How The Grid in Views Works
The first part of the grid looks like this:
That means that it’s the first cell or the first place in your grid. So if you’re doing a grid with 3 columns, this indicates that it’s the first placement of your grid.
The second key factor in this setup is
This is equal to all the in-betweens in your grid set up. So if you have 5 columns, 10 columns, or 3, the index=other is everything in between the first and last column.
Next, you have
The three in this fancy little shortcode is the last column. You can make it whatever number you want, but keep in mind that this will be the last column in the grid.
I’m going to group the next two gems together. They are:
This little gem is the filler for when your grid ends. If you have a grid with three columns, but you only have 7 items. That’s going to throw the grid off.
So pad, once again, is the in between fluff. Similar to index=other except that, it’s empty. You may have already guess what pad-last is, but if not, it’s the last empty shell in your grid.
The point of the padding is if you have a background color or things that you need to clear, you can do it in the last empty column and continue the look of your grid without having it break the grid itself.
Isn’t views awesome! 😀
Have any other cool methods for a grid? Let me know in the comments. Otherwise, enjoy!
What’s that? You don’t have the classes! No problem, here you go!