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

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact
You are here: Home / Archives for CSS Grid Layout

CSS Grid Layout

CSS Grid Layout for Related Posts for WordPress Customize the display of the free plugin with a few lines of code

October 30, 2017 by Sallie Goetsch 15 Comments

grid layout for related posts for WordPress

Barry Kooij’s Related Posts for WordPress is a great plugin, but the default list view takes up a lot of space. Here’s how to convert that bulky list into a compact row or grid using CSS Grid. Continue Reading CSS Grid Layout for Related Posts for WordPress Customize the display of the free plugin with a few lines of code

Filed Under: Using WordPress Tagged With: Tutorial, CSS Grid Layout

CSS Grid Layout for Events Calendar Pro Widget Shortcode How to span the entire grid when you're using auto-repeat values--without media queries

September 28, 2017 by Sallie Goetsch 2 Comments

final grid element spans 3 columns
This entry is part 12 of 13 in the series Modern Tribe Tutorials

When you create a CSS Grid layout using <auto-repeat> values, the number of columns depends on the size of the browser window, but never fear: you can still make an item span the entire width of the grid. I use the Advanced List Widget for Events Calendar Pro as an example. Continue Reading CSS Grid Layout for Events Calendar Pro Widget Shortcode How to span the entire grid when you’re using auto-repeat values–without media queries

Filed Under: Using WordPress Tagged With: CSS Grid Layout, Tutorial

CSS Grid Layout for Event List Widget with Flexbox Fallback Turn your Events Calendar list widget into a grid widget

May 13, 2017 by Sallie Goetsch 2 Comments

First row of event list grid display
This entry is part 10 of 13 in the series Modern Tribe Tutorials

With a few simple changes to your code, you can turn The Events Calendar’s event list widget into a grid of events with featured images. Follow this three-part tutorial to discover the magic of CSS Grid Layout. Continue Reading CSS Grid Layout for Event List Widget with Flexbox Fallback Turn your Events Calendar list widget into a grid widget

Filed Under: Using WordPress, Widgets Tagged With: CSS Grid Layout, Flexbox, Genesis Theme Framework, Tutorial

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact