Archived topic
Grid layout like on GeneratePress homepage
6 replies · Started by Daniel on April 21, 2017
The grid layout you use on the generatepress homepage showcasing the add-ons, with video lightbox popover is precisely what I am trying to achieve for a video tutorials site I am building. I was going to carry out restriction using either Woocommerce Memberships or Restrict Content Pro.
Is that a set of custom code in a child theme that you have used for a custom template part or is it made with standard Premium components / Plugins?
I note that you are using the excellent Lity for video lightbox and I've already enqueued that into my child theme.
Dan
Hi Daniel,
The grid section (9x9) on home page is using Tom's lightweight grid columns plugin: https://en-ca.wordpress.org/plugins/lightweight-grid-columns/
Let me know if this answers your question.
Sorry I actually meant the Premium page, not the homepage as stated https://generatepress.com/premium/
It looks like more than just the lightweight grid columns plugin which I'm already aware of and enjoy using.
The card views in a grid showing the add-ons.
Dan
That's using the built in grid system. So something like this:
<div class="grid-33 tablet-grid-50 mobile-grid-100">
You should be able to achieve the same thing with Light weight grid columns though:
https://generatepress.com/forums/topic/sections-5/
Let me know.
The actual styling of the columns comes from custom CSS. You can developer tools in Chrome to see all of the necessary CSS to get that kind of look.
Thanks guys, I'm really pleased you have a built in grid system so that I can not only create a similar look manually but I can template it so my posts list based on the grid. In the age of SASS, so many theme developers are not doing this anymore but hard coding the sizes onto elements based on a SASS grid.
Glad we could help!
