• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

CSS Grid Columns

The tutorials in this archive enable you to use PHP code and/or CSS to display posts in columns including display: grid; The tutorials include methods which use pure CSS, PHP code and PHP combined with CSS. You'll also find more tutorials related to creating grid columns by using the search form on the primary sidebar. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Genesis Archive Template Using CSS Grid

The Genesis template in this tutorial enables you to display your post entries in columns using CSS Grid which uses a 2 dimensional grid

CSS Grid Columns

Genesis Video Grid Using Embed Code

This basic template enables you to use video embed code to display videos in a single static page template like this : You can use

CSS Grid Columns Video

Vimeo Grid Template Using Video Link In Genesis

This very basic template enables you to add links to videos hosted on Vimeo so they display in a grid like this : All you need to do

CSS Grid Columns Video

Change Minimum Pro Grid Loop To 3, 4 or 6 Columns

The code in this tutorial enables you to display your posts in 2, 3, 4 or 6 columns rather than the standard 2 columns the Minimum Pro

CSS Grid Columns Minimum Pro Theme

Genesis Column Classes In foreach Loop

The code in this tutorial enables you to display a grid using the foreach loop with the existing CSS for column classes already included in

CSS Grid Columns

Custom Field Grid With Image Hover Overlay Effect In Genesis Page Template

This tutorial includes 2 templates which display a grid of images. The images are added via custom fields and can be displayed in a 2, 3, 4

CSS Grid Columns Custom Fields

Filterable YouTube Video Grid For Genesis

The templates in this tutorial enable you to display YouTube videos in a grid which can then be filtered using any criteria you setup. In

CSS Grid Columns Filter & Sort Video

Display Genesis Featured Posts In Horizontal Grid With Overlay Title On Hover

This tutorial shows you one way to use the Genesis Featured Posts widget to display posts in horizontal columns like you see in the Brunch

Brunch Pro Theme CSS Grid Columns Featured Image Genesis Featured Posts

Genesis YouTube Video Grid For Widget Area

The code in this tutorial enables you to display a grid of YouTube videos in a widget area like you see in the following screenshot

CSS Grid Columns Infinity Pro Theme Video

Artists ( Music ) Custom Post Type Grid With Pagination

This tutorial contains the code which enables you to add unlimited single entries for each artist which display in a grid like you see in

CSS Grid Columns Custom Post Type

1st Post Full Width Rest In Columns

This tutorial contains the code which you can use in your functions file or any template file. The code provides another method for

CSS Grid Columns

YouTube Video Grid In Genesis

The 4 different templates in this tutorial enable you to create a mobile responsive grid of YouTube videos like you see in the following

CSS Grid Columns Video

First Post Full Width Then All Other Entries In Columns

This tutorial provides a template which displays the 1st post entry full width and then all other entries in 2 columns. You can also easily

CSS Grid Columns

Foodie Pro Remove Grid

Foodie Pro includes a custom grid function which you can use to display posts in columns. Via the Content Archive settings in the WordPress

CSS Grid Columns Foodie Pro Theme

Foodie Pro Archive Page Template With Columns

This template can be used in any genesis child theme. It has been tested on the Foodie Pro child theme by Shay Bocks in response to the

CSS Grid Columns Foodie Pro Theme

3 Best Ways To Display Any Post Type Archive in Columns

There's at least 3 ways you can display your standard post or custom post type entries in columns on any archive type page. You can use CSS

CSS Grid Columns

Sidebar Before Content On Smaller Screens

By default, Genesis and most WordPress themes display the sidebar below the content when you reduce the screen size. What the code in

CSS Grid Columns

1st CPT Post Full Width Then Posts in 2 Columns

This tutorial shows you how to display the 1st post for a specific custom post type full width and then 2 posts in columns like

CSS Grid Columns Custom Post Type

Horizontally Display Genesis Featured Posts Inline In One Widget Area

If you add the genesis featured posts widget to 1 widget area, it stacks the posts on top of each other. Even if you add 3 genesis featured

CSS Grid Columns Genesis Featured Posts

Display Posts In Columns On Genesis Archive Pages

Using the content column classes built into Genesis, you can display posts in 2, 3, 4 & 6 columns on any blog listings page, including

CSS Grid Columns

  • « Go to Previous Page
  • Go to page 1
  • Interim pages omitted …
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Go to page 6
  • Go to Next Page »

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.